Scss的使用场景

一、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;

h1{font-weight:normal}

p{font-size:20px;}

}

a{

 color:#f00;

&:hover{

color:#00f;

}

}

群组选择器的嵌套

nav,div,footer{

a{

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

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

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

@else {border-radius:10%}

@if,@else if ,@else

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

 

上一篇:编程实现简单的git版本管理系统


下一篇:Scss基本运算-------字符运算