sass的操作以及语法编程基础

ゝ一纸荒年。 2022-03-25 03:24 329阅读 0赞

1-4 SASS 编程基础  
有了前面的 QUICK START 部门的简单了解，基本能描述清楚 SASS 的用途了，具体的控制  
样式 CSS 的定义和其他的程序开发操作，就需要对 SASS 中提供的各种基础性的知识有一  
个简单的认知和应用过程。  
1-4.1.1 变量——Variables  
SASS 中的变量，必须是KaTeX parse error: Unexpected character: '' at position 108: …称，即可引用定义的变量的值。 ̲ 普通变量，定义之后可以在全局…variable\}的形式进行调用。  
 \#\{$variable\}就是取值的一种特殊形式，符合特殊用法。  
SASS 教程

demo.scss  
demo.css  
 全局变量——在变量的后面加上\[!global\]即可声明全局变量。sass 规划是 3.4 以  
后的版本中就会增加这个功能。  
1-4.2 嵌套——Nesting  
SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选  
择器嵌套方案  
 选择器嵌套  
demo.scss  
demo.css  
SASS 教程

1-4.3 嵌套——父属性调用  
在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性  
1-4.4 嵌套属性  
 嵌套属性——不常用  
所谓属性嵌套，是指某些属性拥有同样的单词开头，如：border-left,border-color  
都是以 border 开头的，所以就出现了属性嵌套语法  
demo.scss  
demo.css  
1-4.5 混合——Mixin  
sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用  
逗号分隔，@mixin 的混合代码块由@include 来调用  
 无参数混合——不建议使用，如果是这样的代码块，直接使用后面提到的@extend 来  
处理  
demo.scss  
SASS 教程

demo.css  
 有参数混合  
demo.scss  
demo.css  
 多参数混合  
demo.scss  
demo.css  
SASS 教程

1-4.6 继承扩展——inheritance（@extend）  
在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有  
的样式。  
继承某个样式的同时，也会继承样式的扩展。  
 案例  
06extend.scss  
06extend.css  
1-4.7 Partials && @import  
CSS 本身包含一个指令@import，但是 CSS 中的@import 每次执行都会发送一次新的请  
求都会消耗一定的资源  
SASS 中扩展了这个指令，会将包含的编译成一个 css 文件，切割成小的部分（Partials）  
包含进来进行处理。  
Partials 这样的文件，命名规范是以下划线开头的，这样的 scss 文件不会被编译成 css  
SASS 教程

文件。  
Partials 是用来定义公共样式或者组件的样式的，专门用于被其他的 scss 文件 import  
进行使用的  
在 SCSS 文件中引入指令@import 在引入 Partials 文件时，不需要添加下划线。详细参  
考案例代码。  
 案例：  
\_base.scss  
07Partials.scss  
07Partials.css  
1-4.8 注释  
SASS 中提供了三种注释  
 多行注释  
SASS 教程

 在编译输出的 css 文件中会保留，压缩输出格式中不会保留  
/\*

*  多行注释  
    */  
     单行注释  
     在输出 css 文件时不保留  
    // 单行注释  
     强制注释  
     在多行注释的开头，添加感叹号！表示强制保留  
    /*!
 *  强制注释  
    \*/  
     案例：  
    08comment.scss  
    08comment.css  
    1-4.9 数据类型  
    Sass 支持 7 种主要的数据类型  
    SASS 教程  
    编写：老木  
     数字(例如： 1.2, 13, 10px)  
     字符串(例如：“foo”, ‘bar’, baz)  
     颜色(例如：blue, \#04a3f9, rgba(255, 0, 0, 0.5))  
     布尔值(例如： true, false)  
     空值(例如： null)  
     列表(list)，用空格或逗号分隔 (例如： 1.5em 1em 0 2em, Helvetica, Arial,  
    sans-serif)  
     映射(例如： (key1: value1, key2: value2))  
    1-4.10 数字&数字函数  
    在 SASS 中可以对数字进行运算  
    同时 SASS 支持数字函数的运算  
    1-4.11 字符串  
    SASS 支持字符串的操作  
    SASS 教程  
    编写：老木  
    1-4.12 字符串函数  
    同时 SASS 对字符串的操作有一些封装的函数的支持，方便快捷的处理字符串操作。  
    更多操作请参考官方文档。  
    1-4.13 颜色  
    颜色的表示有很多种  
     十六进制 Hex：\#ff0000 等等  
     RGB:rgb(255, 0, 0)等等  
     字符串：red, blue, green 等等  
     hsl：hsl(0, 100%, 50%)等等  
     等等… …  
    SASS 支持所有这些颜色的表示方式  
    1-4.14 颜色函数——rgb & rgba  
    通过 rgb()的形式进行颜色的控制【红、绿、蓝】  
    1-4.15 颜色函数 hsl & hsla  
    通过 hsl()的形式进行颜色的控制【色相、饱和度、明度】  
    SASS 教程  
    编写：老木  
    1-4.16 颜色函数 adjust-hue  
     颜色色相修改——H【hsl】  
    adjust-hue(要调整的颜色，调整的值)  
    1-4.17 颜色函数 lighten & darken  
     颜色明度修改——L【hsl】  
     lighten 让颜色更亮  
     darken 让颜色变暗  
    1-4.18 颜色函数 saturate & desatruate  
     颜色饱和度修改——S【hsl】  
    SASS 教程  
    编写：老木  
    1-4.19 颜色函数 opacify & transparentize  
     颜色透明度修改  
     opacify()函数，加深透明度  
     transparentize()函数，降低透明度  
    1-4.20 列表——list  
    list 表示列表类型的值  
    在 CSS 中就是表示属性的一串值  
    列表中的值可以使用空格或者逗号分隔，如  
     border:\#ccc solid 1px; 值就是列表  
     font-family:Courier, “Lucida Console”, monospace; 值也是列表  
    SASS 教程

列表中可以包含其他的列表，如：  
 padding:10px 5px, 5px 5px; 值的列表中有两个列表，用逗号分隔  
 padding(10px 5px) (5px 5px);可以用括号分开，编译成 css 时会去掉这些括号  
1-4.21 列表函数  
SASS 中的列表相当于其他语言中的数组，SASS 也提供了一些函数方便列表的操作  
length:获取列表长度  
nth:获取指定位置的列表项  
index:获取某个元素在列表中的位置，如果没有查询到返回 null  
append:给指定的第一个列表添加一个列表项  
join:合并列表  
1-4.22 map 和相关函数  
map 就是列表项目中带名称的列表  
 $map：(key1:value1, key2:value2, key3:value3)  
 KaTeX parse error: Unexpected character: '' at position 42: …e2..):声明一个 Map ̲ length(map):获取 map 中的元素对个数  
 map-get( m a p , k e y ) : 获 取 map, key):获取 map,key):获取map 中名称为 key 的值  
 map-keys( m a p ) : 获 取 指 定 map):获取指定 map):获取指定map 中所有的 key  
 map-values( m a p ) : 获 取 指 定 map):获取指定 map):获取指定map 中所有的 value  
 map-has-key( m a p , k e y ) : 判 断 在 map, key):判断在 map,key):判断在map 中是否包含指定的 key  
 map-merge($map1,  m a p 2 ) : 将 map2):将 map2):将map1 和KaTeX parse error: Unexpected character: '' at position 12: map2 合并在一起 ̲ map-remove(map, key):将指定名称的 key 从$map 中移除  
SASS 教程

\-4.23 布尔值  
SASS 中的布尔值，跟其他语言一样，都是用来表示真/假的逻辑判断的。  
取值：true/false,sass 中可以使用比较运算符，返回的就是布尔值  
 比较运算符  
 >、 >=、 <、 <=、 !=、 ==  
 逻辑运算符  
 and、or、not  
1-4.24 interpolation  
Interpolation 可以将一个值插入到另一个值中。  
SASS 中可以将表达式放在\#\{$variable\}中，用于使用变量的值  
KaTeX parse error: Expected 'EOF', got '\#' at position 22: …n:0.0.1; /\*项目版本\#̲\{ version\}\*/  
$name:”info”;  
KaTeX parse error: Expected 'EOF', got '\#' at position 23: …order”; .alert-\#̲\{ name\} \{  
\#\{$attr\}-color:\#ccc;  
\}  
SASS 教程

1-4.25 控制指令——Control Directives  
SASS 中为了更加方便的处理一些带有逻辑性的样式，如满足某些条件的时候使用指定的样  
式，或者根据指定列表中的项目循环输出样式等，提供了一些控制指令进行处理  
 @if：条件控制指令  
 @for:循环指令  
 @each:循环指令  
 @while:循环指令  
1-4.26 @if  
@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的  
样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式  
@if 条件 \{  
// 当条件为真时执行的样式  
\}  
同样，也可以通过@else if 和@else 指令结合，进行多条件的判断  
1-4.27 @for  
@for 指令在 SASS 中用于重复处理一组指令  
有两种表现形式  
 @for $var from <开始值> through <结束值>  
 @for $var from to  
SASS 教程

to 和 through 都是表示一个区间，唯一的区别就是停止循环的地方不一样。 v a r 可 以 是 任 意 一 个 变 量 名 称 如 var 可以是 任意一个变量名称如 var可以是任意一个变量名称如i，和是 SASS 表达式并且必须是整数  
1-4.28 @each  
@each 在 Sass 中主要被用来进行列表或者映射数据的循环  
主要表示形式：@each $var in  
$var 可以是任意变量名称，是 SASS 表达式并且必须是 List  
1-4.29 @while  
@while 指令在 SASS 中用于循环重复处理样式，知道@while 表达式返回 false  
SASS 教程

1-4.30 用户自定义函数——function  
函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式  
由定义的函数具体的设计确定。  
@function 函数名称(参数列表)\{  
// 数据处理  
\}  
1-4.31 警告 VS 错误  
在自己设计的函数或者 Mixin 中，可以包含一些警告或者错误提示信息，用户在错误使用  
函数或者 mixin 时，就会看到这样的错误提示。  
 @warn:警告信息——会出现在命令行窗口中，编译提示  
 @error:错误信息——会出现在编译后的 css 文件中，错误提示  
@warn message; 警告信息，警告信息一般会在执行 scss 程序生成 css 时触发，所以  
出现在命令行中。  
@error message; 错误信息，错误信息直接显示在编译的 css 文件中。  
SASS 教程