Thinking about this differently, I thought I could just have my python script run sass --watch source.sass:target.css and so I followed up how to run bash commands in python. Hence my __init_.py now includes:
bashCommand = "sass --watch ./css/main.sass:./css/main.css"
import subprocess
process = subprocess.Popen(bashCommand.split(), stdout = subprocess.PIPE)pyScss is a Scss (Sass) implementation for Python. Currently it implements @mixin, @include, @if, @else, @for, and @import… it also implements many of the Sass functions including color functions like hsla(), hsl(), darken(), lighten(), mix(), opacify(), transparentize(), saturate(), desaturate(), etc.) as well as sprite-map(), sprite-file(), image-width(), image-height() and the others.,pyScss compiles Scss (Sass), a superset of CSS that is more powerful, elegant and easier to maintain than plain-vanilla CSS. The library acts as a CSS source code preprocesor which allows you to use variables, nested rules, mixins, and have inheritance of rules, all with a CSS-compatible syntax which the preprocessor then compiles to standard CSS.,Support for the new Sass 3.2.0 features (@content and placeholder selectors),Scss, as an extension of CSS, helps keep large stylesheets well-organized. It borrows concepts and functionality from projects such as OOCSS and other similar frameworks like as Sass. It’s build on top of the original PHP xCSS codebase structure but it’s been completely rewritten, many bugs have been fixed and it has been extensively extended to support almost the full range of Sass’ Scss syntax and functionality.
pyScss should be installed using pip or setuptools:
pip install pyScss easy_install pyScss
Usage example:
from scss
import Scss
css = Scss()
css.compile("a { color: red + green; }")Or compile from the command line:
python - mscss < file.scss
Interactive mode:
python - mscss--interactive-mscss will only work in Python 2.7 and above, for Python 2.5 and 2.6 you need to invoke:
python - mscss.tool
Example:
@option compress: no;
.selector {
a {
display: block;
}
strong {
color: blue;
}
}…produces:
.selector a {
display: block;
}
.selector strong {
color: #00f;
}Example:
@option compress: no;
$main - color: #ce4dd6;
$style: solid;
$side: bottom;
#navbar {
border - # {
$side
}: {
color: $main - color;
style: $style;
}
}…produces:
#navbar {
border - bottom - color: #ce4dd6;
border - bottom - style: solid;
}Example:
@option compress: no;
@mixin rounded($side, $radius: 10 px) {
border - # {
$side
} - radius: $radius; -
moz - border - radius - # {
$side
}: $radius; -
webkit - border - # {
$side
} - radius: $radius;
}
#navbar li {
@include rounded(top);
}
#footer {
@include rounded(top, 5 px);
}
#sidebar {
@include rounded(left, 8 px);
}…produces:
#navbar li {
border - top - radius: 10 px; -
moz - border - radius - top: 10 px; -
webkit - border - top - radius: 10 px;
}
#footer {
border - top - radius: 5 px; -
moz - border - radius - top: 5 px; -
webkit - border - top - radius: 5 px;
}
#sidebar {
border - left - radius: 8 px; -
moz - border - radius - left: 8 px; -
webkit - border - left - radius: 8 px;
}Last updated on November 12 2021
For example, we have CSS code like this.
nav ul {
margin: 0;
padding: 0;
list - style: none;
}
nav li {
display: inline - block;
}
nav a {
display: block;
padding: 6 px 12 px;
text - decoration: none;
}In SCSS, we can write in this way
nav {
ul {
margin: 0;
padding: 0;
list - style: none;
}
li {
display: inline - block;
}
a {
display: block;
padding: 6 px 12 px;
text - decoration: none;
}
}Another useful feature is variable, if we have CSS like this
body {
font: 100 % Helvetica,
sans - serif;
color: #333;
}You should know, the code below can still work in .scss but you should also know there is a better way to implement it.
nav ul {
margin: 0;
padding: 0;
list - style: none;
}
nav li {
display: inline - block;
}
nav a {
display: block;
padding: 6 px 12 px;
text - decoration: none;
}First, please go to Bootstrap 4 homepage to Download source, in the package, you will see a directory has name scss, and this directory contains many scss files
utilities
mixins
bootstrap.scss
bootstrap - reboot.scss
bootstrap - grid.scss
_variables.scss
_utilities.scss
_type.scss
_transitions.scss
_tooltip.scss
_tables.scss
_root.scss
_reboot.scss
_progress.scss
_print.scss
_popover.scss
_pagination.scss
_navbar.scss
_nav.scss
_modal.scss
_mixins.scss
_media.scss
_list - group.scss
_jumbotron.scss
_input - group.scss
_images.scss
_grid.scss
_functions.scss
_forms.scss
_dropdown.scss
_custom - forms.scss
_code.scss
_close.scss
_carousel.scss
_card.scss
_buttons.scss
_button - group.scss
_breadcrumb.scss
_badge.scss
_alert.scssDepending on your preference, SASS can be installed in many different ways. There are several free applications that allow you to have SASS up and running in no time. It can also be installed directly from the command line. If you don’t have SASS already installed, then take some time to explore your options here: SASS Install Guide.,SASS allows you to make sophisticated style sheets faster. It keeps your code from being repetitive by having features specifically made for code reuse. By incorporating SASS in your code, you’ll find your code to be cleaner and more readable.,SASS includes a feature called mixins that allows you to reuse snippets of CSS code wherever you want. Once you create a mixin, you can use it by calling it. The syntax for creating a mixin is as follows:,SCSS makes use of variables. Unlike CSS, where you have to call a var() function to make a variable, SCSS allows you to make variables directly. This is great for keeping track of things like fonts, colors, and sizing that you know you’re going to use over and over again.
The syntax for SASS variables is as follows:
$variableName: value;
$variableName: value;
Let’s take this piece of code for example:
body {
color: #000000; font: 100% Helvetica, sans-serif; font-size: 50px; font-weight: lighter;}If we know we’re going to be using the color black and font Helvetica often in our code, then we can set them to variables using SCSS. We can do this as follows:
$black: #000000;$font-type: Helvetica, sans-serif;
body { color: $black; font: 100% $font-type; font-size: 50px; font-weight: lighter;}$black: #000000;$font-type: Helvetica, sans-serif;
body { color: $black; font: 100% $font-type; font-size: 50px; font-weight: lighter;}$variableName: value;
body {
color: #000000; font: 100% Helvetica, sans-serif; font-size: 50px; font-weight: lighter;}$black: #000000;$font-type: Helvetica, sans-serif;
body { color: $black; font: 100% $font-type; font-size: 50px; font-weight: lighter;}nav ul {
margin: 2;padding: 2;list - style: none;
}
nav li {
display: inline - block;
}
nav a {
display: block;padding: 12 px 24 px;text - decoration: none;
}nav {
ul {
margin: 2;padding: 2;list - style: none;
}
li {
display: inline - block;
}
a {
display: block;padding: 12 px 24 px;text - decoration: none;
}
}