sass study notes
install
npm install -g sass
Using sass in vue projects
Create vue project
vue create projectName
Install sass related configuration
//Note version npm install node-sass npm install sass-loader
Write sass
Write lang = "scss" on the style tag to start.
Characteristic function
- Compatible with css3
- Add variables, nesting, mixins, inline import and other functions
- Operation of color value and attribute value through function
- It provides advanced functions such as control commands
- Custom output format
Syntax format
Two grammars
1. scss syntax, in scss as extension
Similar to css, it is commonly used and popular
2. sass syntax sass as extension
Do not write curly braces and semicolons, and divide blocks by shrinking in
Either format can be directly imported (@ import) into another format, or converted through the sass convert command line.
parent selector
&Represents the parent selector
It is generally used in hover. Nesting does not need to be written. Just nest directly
the value ! important ,which is parsed as an unquoted string.
special functions
calc(),element(),progid,expression()
url()
min()
max()
unquoted strings
An unquoted string is usually a specific noun, such as red and blod
nested rules
Sass allows a set of CSS styles to be nested into another set of styles. The inner style takes the outer selector as the parent selector, for example:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
Compile as
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
The nesting function avoids * * repeated input of parent selectors, * * and makes the complex CSS structure easier to manage:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
For pseudo classes, you can directly use the parent selector &,,, or you need to use the parent selector of &
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
&Must be the first character of the selector, followed by a suffix to generate a compound selector, which can be connected with a dash, for ex amp le
#main {
color: black;
&-sidebar { border: 1px solid; }
}
Multi level nesting, & only from the inside out, the first parent element.
Write in the same namespace
Some CSS attributes follow the same namespace. For example, font family, font size and font weight all use font as the namespace of attributes. In order to facilitate the management of such attributes and avoid repeated input, Sass allows attributes to be nested in namespaces, for example:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
Compile as
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
@How extend works (inheritance)
use @extend We can use the defined selector in CSS. The following example can illustrate everything:
.icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend .icon;
/*Style specified by error icon */
}
.info-icon {
@extend .icon;
/* Style specified by Info Icon */
}
The CSS code compiled by the above SCSS code is as follows:
.icon, .error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/*Style specified by error icon */
}
.info-icon {
/* Style specified by Info Icon */
}
Existing problems: Icons are rarely used, so let's optimize them with placeholders.
placeholder
Start with (%), and the compiled CSS code will not include the styles in the% placeholder rule unless it is called through @ extend.
%icon { transition: background-color ease .2s; margin: 0 .5em;}.error-icon { @extend %icon; /*Style specified by error icon */}.info-icon { @extend %icon; /* Style specified by Info Icon */}
Compiled CSS: (no. icon)
.error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em;}.error-icon { /*Style specified by error icon */}.info-icon { /* Style specified by Info Icon */}
@mixin instruction
Is another way to simplify code. Mixins can contain anything and can pass parameters.
Modules that can pass parameters
parameter
$string
Reference with $
Parameter defaults
Write after colon
@mixin button($background: green)
.button-blue { @include button(blue); }m
Parameter passing can be specified and the order can be changed
.button-green { @include button($background: green, $color: #fff); }
Pass any parameter
... indicates
@mixin box-shadows($shadow...) { box-shadow: $shadow; } .container { @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc); }
notes
Sass supports standard CSS multi line comments / * * /, and single line comments / /. The former will be completely output to the compiled CSS file, while the latter will not
/**/Will be compiled into css, / / will not be compiled
You can add variables to comments
$version: "1.2.3";/* This CSS is generated by My Snazzy Framework version #{$version}. */
Color operation
p { color: #010203 + #040506;}
Calculate 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09 and compile as
p { color: #050709; }
p { color: #010203 * 2;}
Calculate 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06, and compile as
p { color: #020406; }
If the color value contains alpha channel (rgba or hsla color values), you must have equal alpha values to perform the operation, because the arithmetic operation will not act on the alpha value.
String operation
+Available for connection strings
p { cursor: e + -resize;}
Compile as
p { cursor: e-resize; }
Note that if a quoted string (* * on the left side of +) * * is connected to a non quoted string, the operation result is quoted. On the contrary, if a non quoted string (on the left side of +) is connected to a quoted string, the operation result is not quoted.
p:before { content: "Foo " + Bar; font-family: sans- + "serif";}
Compile as
p:before { content: "Foo Bar"; font-family: sans-serif; }
Use #{} interpolation statements in quoted text strings to add dynamic values:
p:before { content: "I ate #{5 + 10} pies!";}
Compile as
p:before { content: "I ate 15 pies!"; }
Conditional statement
@if
@else if
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; }}
Circular statement
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
Compile as
.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }
- @for $i from 1 through 3 / / from 1 to 3, including 1 and 3
- @for $i from 1 to 3 / / excluding 3
ergodic
@each $valiable in puma, sea-slug, egret, salamander {}
Multivalued traversal
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; }}
is compiled to:
.puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; }
condition loop
$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}
@The difference between include and @ extend
mixer It is mainly used for the reuse of presentation styles, while class names are used for the reuse of semantic styles. Because inheritance is class based (sometimes based on other types of selectors), inheritance should be based on semantic relationships. When a class owned by an element (such as. Serialerror) indicates that it belongs to another class (such as. error), inheritance is most appropriate.