Scss的使用场景

Posted 2022-12-21 sna-ling

一、Scss

1.CSS有几个缺点

• 语法不够强大，没有变量和合理的样式复用机制
• 使得逻辑上相关的属性值必须以字面的形式重复输出，难以维护
• 动态的样式语言为css富裕了动态语言的特性
• 极大的提高了样式语言的可维护性   

常见的样式语言：

1.scss/sass（scss兼容sass,scss更接近css的语法格式）

2.stylus

3.less

动态语言------css预处理----->*.css

2.什么是SCSS

是一款强化css的辅助工具

在css的语法上，增强了变量、嵌套，混合，导入，函数等高级功能。这些拓展另css更加强大与优雅。

3.scss的作用，有助于更好的管理样式文件，以及更高效的开发项目。

4.scss的使用

1.在服务器端使用

• 安装nodejs解释器
• 安装scss的编译程序 

在线安装  npm install -g node-sass

注意：要求node.js版本在8.11以上

2. 把sass包中的4个文件拷贝进node.js文件夹

• 在黑窗口或者ws的控制台(alt+f12)输入
• node-sass-v 检测sass版本
• 如果输入版本，说明sass安装成功

3.编写01.scss文件

1. 把.scss转化为.css文件
2. 在正确路径下，打开黑窗口，输入
3. node-sass scss/01.scss    css/01.css
4. 如果生成01.css则正确

• 批量把scss转化为css,多文件转换命令
• node-sass  scss 文件夹 -o css文件夹

 

• 单文件监听命令，scss文件一旦保存，自动转换为css文件
• node-sass -w scss/01.scss css/01.css 

多文件监听

• node-sass  -w scss -o css

二、SCSS的基础语法 

1.变量

使用$表示变量

变量的命名规范，遵循css中选择器的命名规范，

可以包含_ -,不能以数字开头，见名知意

1. $jd-red:#f10125;颜色变量
2. $w:100px;数值变量
3. $before-content:"子曾经曰过"字符串变量
4. $border-style:solid;样式变量

注意：

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

 

样式嵌套规则：

#content

color:#f00;

div.top

margin:0 auto;

h1font-weight:normal

pfont-size:20px;

 

a

 color:#f00;

&:hover

color:#00f;

群组选择器的嵌套

nav,div,footer

a

color:#000;

&:hovercolor:#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;

$:hovercolor:$hover

$:visitedcolor:$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中，除号经常起到分隔的用途 /

p

font:10px/5px;

$width:100px;

width:$width/2;

height:(500px/2);

margin:5px+8px/2px;

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

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

(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=4border-radius:50%

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

@else border-radius:10%

@if,@else if ,@else

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