CSS is uncomfortable to write CSS is troublesome, but not good maintenance, in short, it is unpleasant.
The CSS preprocessor then adds programming elements to the CSS, which is the "CSS preprocessor."
Sass vs Less is the most well known CSS preprocessor for Sass and less. Among the many CSS preprocessor who are the best and the shortest answer: Sass.
Sass Introduction Sass is written by Ruby, but not a little bit related to Ruby's syntax, so learning Sass doesn't have to learn Ruby, it just needs to install Ruby. Sass is an extension of CSS3, a superset of CSS3.
Install Ruby has said that Sass is written by Ruby, so first install Ruby, different operating system installation methods are different, Ruby official website: https://www.ruby-lang.org/en/documentation/installation/. To detect if Ruby is installed successfully:
Ruby-v
Or
Ruby--version
Install SASS Enter the following command:
Gem Install Sass
To detect if the installation was successful:
Sass-v
Or
Sass--version
Upgrade Sass version:
Gem Update sass
Sass syntax one of the two syntax formats is the. Sass as the extension, which is sensitive to whitespace, without curly brackets, without semicolons:
#div width:100px height:200px
The other is with the. Scss as the extension, and the familiar curly braces and semicolons appear:
#div { width:100px; height:200px; }
Which syntax do you choose? The latter, of course.
There are four compilation styles in the compilation style: (1) Nested: Nested indented CSS code, which is the default value.
(2) Expanded: No indented, extended CSS code.
(3) Compact: A concise form of CSS code.
(4) Compressed: Compressed CSS code.
Sass 001.scss 001.CSS--style Compressed
Or
Sass--style Compressed 001.scss 001.css
If you use only:
Sass 001.scss
The compiled. CSS output is displayed on the command line.
Variable variable names begin with a $ symbol and can contain all the characters that can be used as CSS class names, including underscores and underscores.
$width: 100px; #div { width: $width; height:200px; }
$width: 2px; #div { border: $width solid red;}
If the variable needs to be embedded in a string, the variable needs to be placed in #{}:
$dir: Top; #div { border-#{$dir}: 2px solid red;}
If a variable is defined within a CSS rule block, it is only valid within this rule block. The variable name does not differentiate between the underscore and the underscore, that is, $link _color is the same as $link-color:
$link-color:red; #div { color: $link _color;}
Nested selectors nesting:
#div { h1 { color:red; } Article { p { color:green } }}
After compiling:
#div H1 { color:red;} #div Article P { color:green;}
Parent Selector Identifier &:
a { color:red; &:hover { color:green; }}
After compiling:
a { color:red;} a:hover { color:green;}
a { color:red; P & { color:green; }}
After compiling:
a { color:red;} P a { color:green;}
Nesting of group selectors:
aritcle { H1, H2, H3, H4 {color: #ccc}}
After compiling:
aritcle H1, aritcle H2, aritcle H3, aritcle h4 { color: #ccc;}
Aritcle, aside { H1, H2 {color: #ccc}}
After compiling:
aritcle H1, aritcle H2, aside H1, aside H2 { color: #ccc;}
The combo selector:> + ~ does not need to use the parent selector identifier &, can be used behind the outer selector, or can be used in the front of the innermost selector:
aritcle { > section {color:red} + sections {color:green} ~ section {color:blue} dl > { dt {col Or: #ccc} dd {color: #666}} }
After compiling:
aritcle > section { color:red;} aritcle + section { color:green;} aritcle ~ section { color:blue;} aritcle dl > DT { color: #ccc;} Aritcle DL > DD { color: #666;}
Attributes can also be nested, with ":" To break the attribute name from the "-", to add a colon behind the root property, followed by a "{}" block, and the property part is written in the "{}" block:
Nav { margin: { top:10px; left:5px;} }
After compiling:
Nav { margin-top:10px; margin-left:5px; }
Nav { margin:15px { top:10px; left:5px;} }
After compiling:
Nav { margin:15px; margin-top:10px; margin-left:5px; }
@importSass rewritten the @import. Native CSS does not download its imported CSS file until it is @import. The Sass @import import the relevant files when the CSS file is generated. @import that use Sass do not need to specify the extension of the import file, that is, you can omit the. scss or. Sass. Sass allows @import to be written within CSS rules. Sass has a file naming convention, for do not need to generate a corresponding independent CSS file, only as a @import written Sass file, called local files, local file names begin with an underscore, you can omit the underscore when importing a local file. The following three scenarios use CSS native @import: (1) The imported file name ends with a. css, (2) The file name being imported is a URL address, such as HTTP://WWW.XXX.COM/STYLE/XXX.CSS; (3) The imported file name is the CSS ur The L () value.!default!default is used for variables, meaning: If the variable is declared to be assigned, then it is declared with the value, otherwise the default value is used:
$width: 10px; $width: 20px!default; $height: 10px; $height: 20px; #div { width: $width; Height: $height;}
After compiling:
#div { width:10px; height:20px; }
Note the comments in the CSS standard format are:/* ... */. Sass also has a comment called silent Comment://comment content. This comment does not appear in the generated CSS file.
Mixer variables are used to reuse a value, and the mixer can reuse a large segment style. The mixer uses the @mixin identifier definition and @include references the mixer.
@mixin rounded-corners { -moz-border-radiux:5px; -webkit-border-radius:5px; border-radiux:5px;} #div { color:red; @include Rounded-corners;}
After compiling:
#div { color:red; -moz-border-radiux:5px; -webkit-border-radius:5px; border-radiux:5px; }
You can also use CSS rules in a mixer:
@mixin rounded-corners { -moz-border-radiux:5px; -webkit-border-radius:5px; border-radiux:5px; a { color:red; } & span { color:blue; }} #div { color:red; @include Rounded-corners;}
After compiling:
#div { color:red; -moz-border-radiux:5px; -webkit-border-radius:5px; border-radiux:5px; } #div a { color:red;} #div span { color:blue;}
You can pass parameters to the mixer, which can have default values:
@mixin rounded-corners ($size, $color, $color 2:red) { -moz-border-radiux: $size; -webkit-border-radius: $size; Border-radiux: $size; A { color: $color; } & span { color: $color 2; }} #div { color:red; @include rounded-corners (10px, green);}
After compiling:
#div { color:red; -moz-border-radiux:10px; -webkit-border-radius:10px; border-radiux:10px; } #div a { color:green;} #div span { color:red;}
Selector Inheritance selector inheritance refers to a selector that inherits the style defined by another selector, inheriting the use of @extend.
. error { color:red; font-size:16px;}. syntax { background-color:blue; @extend. Error;}
After compiling:
. Error,. syntax { color:red; font-size:16px; }.syntax { background-color:blue;}
An expression can be called an expression as long as it can be placed on the right side of the property, such as a simple value of bold or 5px, or a list of values 2px solid #ccc. In an expression, you can include not only variables, but also math operators.
Each value in a data type CSS property or Sass variable has a type, different type, and a different action, and Sass can understand all of these types.
Strings include unquoted strings and quoted strings, bold, auto, center attributes to unquoted strings, and "Microsoft Yahei" are quoted strings. The string join operator is: "+". If two strings are unquoted strings, the result is an unquoted string, and if two strings are quoted strings, the result is also a quoted string, and if one is a quoted string and one is an unquoted string, the result and whether there is a quotation mark depends on the string on the left.
div + P divp "div" + P "DIVP" div + "p" DIVP
The numerical value consists of two parts: the actual value and the unit. When multiplying and dividing numbers with units, the units do multiplication and division together, such as:
5em*4px 20em*px16px/1em 16px/em
What's the use of it? Can be used in the unit conversion, such as 16px/em represents 1em is 16px. When an addition or subtraction is done for a value with a unit, the Sass is automatically converted, otherwise an error occurs if the conversion is not possible.
You can also use the modulo operation:%. Division "/" is somewhat special, because "/" can represent a division, or a normal slash, the following three cases satisfy any one will use Division: (1) Use a variable on either side of/, (2) The entire value is surrounded by parentheses; (2) The value is used as part of other arithmetic expressions.
$var: 1px; $var/2px; (1px/2px); 1 + 1px/2px;
Color regardless of the original color value in the form of the Sass, the interior will use both RGB and HSL to represent the color.
A list list is a sequence of numeric values that represent attributes such as border, font, and so on, such as 2px solid #ccc, or separated by commas. Arithmetic operators are useless for lists. There are only two Boolean Boolean values: True and False. Boolean values do not use arithmetic operators, and they have their own operators: and, or, and not. operator that returns a Boolean value:
<<=>>===
For less than and greater than for numbers only, for = = can be used for all types.
Unlike a CSS function, the Sass function can use a keyword variable, which means that the parameter is not indicated by the order of the parameters, but instead can be displayed by naming several or all of the variables:
RGB ($green: 127, $blue: 127, $red: 255)
The numerical function (1) ABS () takes the absolute value of 2, the Ceil () upward rounding, (3) floor (() downward rounding; (4) Round () rounded, (5) percentage () converted decimal numbers to percentages, (6) comparable (1, 2) 1 and 2 could be compared ; (7) unit () returns units, (8) unitless () returns whether there are no units.
The color function (1) alpha ($color)/opacity ($color) returns the alpha channel of $color;
(2) Blue ($color) returns to $color;
(3) Green ($color) returns to the $color channel;
(4) Red ($color) returns to the $color channel;
(5) Hue ($color) returns the Chroma attribute of $color;
(6) Lightness ($color) returns the luminance attribute of $color;
(7) Saturation ($color) returns the saturation attribute of the $color;
(8) complement ($color) returns the $color color ring and complements with $color;
(9) Grayscale ($color) returns the grayscale version of $color;
(a) Invert ($color) returns the reversed version of $color;
Mix ($color 1, $color 2, [$weight]) Mix $color1 and $color2 as a percentage of $weight;
($adjust) ($color, ...) Adjusts the $color properties according to the given color composition;
$scale ($color, ...) Adjust the properties of the $color as a percentage;
$set ($color, ...) Set the individual properties of the $color to a fixed value.
List function (1) nth (a b C, $n) returns the $n value of the list;
(2) Join ($list 1, $list 2, [$separator]) connects two lists, and if there is no $separator, the delimiter is whichever is the first;
(3) Length ($list) returns the number of items in the $list list.
Other functions (1) type-of ($value) returns an unsigned string representing the type of $value, which can be: number, string, color, bool, list;
(2) if ($condition, $if-true, $if-false) is like the ternary operator, if $condition is true, $if-true is returned, otherwise $if-false is returned.
Custom functions use @function directives to customize functions, and each @function must return a result.
@function width ($w) { @return $w * 100px;}
The control instruction @for@for instruction is used to count, there are two kinds of syntax: (1) @for $i from to (2) @for $i from through
@for $i from 1 to 5 { . box-#{$i} { width:100px * $i; }}
After compiling:
. box-1 { width:100px;}. box-2 { width:200px;}. box-3 { width:300px;}. box-4 { width:400px;}
@for $i from 1 through 5 { . box-#{$i} { width:100px * $i; }}
After compiling:
. box-1 { width:100px;}. box-2 { width:200px;}. box-3 { width:300px;}. box-4 { width:400px;}. box-5 { width:500px;}
You can see that the difference between the two syntaxes is to not include the last number.
@each @each instruction repeats a style block multiple times.
@each $item in Home, about, archive { nav. #{$item} { Background-image:url (/images/#{$item}.png);} }
After compiling:
Nav. Home { background-image:url (/images/home.png);} Nav. About { Background-image:url (/images/about.png);} Nav. Archive { background-image:url (/images/archive.png);}
The list in @each directives can be separated by commas or separated by spaces.
@if @else The @if instruction is used to control whether a style block is used, which can also be used in conjunction with @else if and @else directives.
$flag: 2;. Nav { @if $flag = = 1 { width:100px; } @else if $flag = = 2 { width:200px; } @else { width:300px; }}
After compiling:
. nav { width:200px;}
Reference (1) "Sass and Compass Combat" (2) http://www.ruanyifeng.com/blog/2012/06/sass.html
Sass Tutorial: From getting started to getting started
