Scss usage scenarios

A, Scss

There are several disadvantages 1.CSS

Grammar is not strong enough, no variable styles and reasonable multiplexing mechanism
Such that the associated value to the logic must repeatedly output in the form of literal, difficult to maintain
Dynamic style of language css rich dynamic language features
Greatly improves the maintainability of style language

Common style language:

1.scss / sass (scss compatible sass, scss closer css syntax format)

2.stylus

3.less

Dynamic language ------ css pre------> *. Css

2. What is SCSS

Css is a strengthening aid

Grammatically css, enhanced variable, nesting, advanced features mix, import, functions, and so on. These css expand another more powerful and elegant.

The role of 3.scss help better management style files, as well as more efficient development projects.

4.scss use

1. On the server side

Installation nodejs interpreter
Installation scss compiler

Online install npm install -g node-sass

Note: Requires version 8.11 or more node.js

2. 4 sass package files copied into folder node.js

Ws black window or console (alt + f12) input
detecting node-sass-v version sass
If you enter a version, indicating that the installation was successful sass

3. Write 01.scss file

.Css file into the .scss
Under the correct path, a black window is opened, the input
node-sass scss/01.scss css/01.css
If it generates the correct 01.css

The bulk scss into css, multi-file conversion command
node-sass scss folder -o css folder

Single-file monitor command, scss Once the file is saved automatically converted to css files
node-sass -w scss/01.scss css/01.css

Multi-file monitor

node-sass -w scss -o css

Two, SCSS of basic grammar

1. Variables

Use a variable representing $

Naming variables, follow the naming convention of the css selector,

May contain _ - can not start with a number, see the name EENOW

$ Jd-red: # f10125; color variants
$ W: 100px; numeric variable
$before-content:"子曾经曰过"字符串变量
$border-style:solid;样式变量

注意：

声明变量时，变量值可以应用其他的变量。
变量定义在{}规则外边，整个样式文件中都可以使用，如果定义在{}规则块外边，只能在当前规则块中使用。
声明重复变量，后声明的变量会覆盖前面的变量。
!default规则，如果变量已经声明赋值了，那就用它之前声明的值

样式嵌套规则：

#content{

color:#f00;

div.top{

margin:0 auto;

h1{font-weight:normal}

p{font-size:20px;}

}

color:#f00;

&:hover{

color:#00f;

}

群组选择器的嵌套

nav,div,footer{

color:#000;

&:hover{color:#f00;}

}

属性嵌套

div{

border:{style:solid;width:1px;color:#f00;}

}

2.导入scss文件

在SCSS中，局部文件以下划线开头

这样做，sass在编译时就不会编译以下划线开头的文件，而是把这个文件用作导入。

引入局部文件时，是关键字@import "局部文件名"，局部文件省略了下划线和后缀。

并且一个局部文件可以被多个SCSS文件引用。

3.混合器

把需要在多个样式文件中出现的，相同的部分提取出来，封装到混合器中。

关键字 @mixin 混合器名称{重用的样式}

使用，关键字 @include 混合器名称。就可以在很多的样式中使用封装好的样式了。

带参数的混合器(类似参数的function)

定义混合器的时候，在()添加参数
调用混合器的时候，在()把参数补上

@mixin lin-colors($normal,$hover,$visited){

color:$normal;

$:hover{color:$hover}

$:visited{color:$visited}

}

ul li a{

@include lin-colors{#f00,#0f0,#00f};

}

#content a{

@include lin-colors{#faa,#afa,#aaf};

}

4.继承

继承就是说一个选择器可以继承另一个选择器定义的所有样式

在css中的表现形式是两个选择器共有的部分，变成了群组选择器

三、运算

1.数字

加减乘除，求模取值
会在不同单位间转换值
width:1in+8pt;
scss不能转换相对单位
height:1rem+1em;

(1)注意：加法

p::before{

content:"Microsoft"+yahei;

font-family:A+"rial"

}

结果

content:"Microsoftyahei";

font-family:Arial;

+ 可以用于连接字符串

如果用引用去连接无引号的字符串，结果是有引号的

如果用无引号去连接有引号的字符串，结果是无引号的

(2)减法

- 会被优先解析为变量名，所以使用变量和减法，需要-前后添加空格

width:$size - $my-width

(3)除法

在scss中，除号经常起到分隔的用途 /

font:10px/5px;

$width:100px;

width:$width/2;

height:(500px/2);

margin:5px+8px/2px;

}

在以下的情况视为除法运算

如果值，或者值的一部分，是变量或者函数的返回值
如果值被小括号包裹，视为除法
如果值是算术表达式的一部分，视为除法

(4)运算表达式与其他值连用时，用空格做连接

margin:4px + 5px auto;

(5)在有引号的字符串中，使用#{}插值语句可以添加动态的值

content:"I ate #{16+23} baozis"

2.颜色的运算

颜色是分段计算的，红+红绿+绿蓝+蓝

rgb(23,32,45)+rgb(11,23,33)

rgba(11,22,33,0.1)+rgba(22,33,44,0.1)

两个rgba相加，alpha的值，必须相等才可以计算，因为算术运算符不会作用到alpha

四、函数

1.scss定义了多种函数，有些函数甚至直接在css中调用

1.颜色函数

rgba(red,green,blue,alpha)
hsl(hue,saturation,lightness)
hue:色调取值 0~360 3个色段每120 一个色段
saturation:饱和度 0.0%~100.0%
lightness:亮度 0.0%~100.0%

2.数字函数

round($value) 四舍五入

ceil($value)向上取整

floor($value)

max($v1,$v2,.......)

min($v1,$v2,........)

random()

3.字符串函数

unquote($string) 删除字符串引号

quote($string)给字符串添加引号

To-upper-case()

To-lower-case()

2.自定义函数

@function 函数名($n){

函数体;

@return 结果；

}

四.控制指令

@if 1+1=4{border-radius:50%}

@else if(1-1==-1){border-radius:30%}

@else {border-radius:10%}

@if,@else if ,@else

boolean 表达式，可以添加括号，也可以不加

Scss usage scenarios

Guess you like