sass scss 语法、用法小总结


一、sass语法

1.1 声明变量-普通变量-默认变量-特殊变量-全局变量

定义变量的语法:

普通变量
定义之后可以在全局范围内使用。
$fontSize: 12px;
body{
    font-size:$fontSize;
}
默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight;
}
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要重新声明下变量即可。
全局变量——在变量的后面加上[!global]即可声明全局变量。sass 规划是 3.4 以后的版本中就会增加这个功能。

 

特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作
为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
  #{$variable}     就是取值的一种特殊形式,符合特殊用法。

 2.2 sass嵌套-选择器嵌套

    SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式,正常项目中通常使用的都是选
择器嵌套方案
【注】在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性

 2.3 sass嵌套-属性嵌套

嵌套属性——不常用
所谓属性嵌套,是指某些属性拥有同样的单词开头,如:wborder-color
都是以 border 开头的,所以就出现了属性嵌套语法

 2.4 sass混合-Mixin

sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用
逗号分隔,@mixin 的混合代码块由@include 来调用

 

 2.5 sass继承拓展-@extend

在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有
的样式。
继承某个样式的同时,也会继承样式的扩展。

 

 2.6 Partitials和@import

Partials 是用来定义公共样式或者组件的样式的,专门用于被其他的 scss 文件 import
进行使用的
在 SCSS 文件中引入指令@import 在引入 Partials 文件时,不需要添加下划线。详细参
考案例代码。

声明公共样式,公共样式文件要以 _

 

 2.7 sass注释

SASS 中提供了三种注释
多行注释  在编译输出的 css 文件中会保留,压缩输出格式中不会保留 --style compressed
/*
* 多行注释
*/

单行注释    在输出 css 文件时不保留
      // 单行注释

强制注释  在多行注释的开头,添加感叹号!表示强制保留
/*!
* 强制注释
*/

2.8 sass数据类型

Sass 支持7种主要的数据类型
> 数字(例如: 1.2, 13, 10px)
> 字符串(例如:"foo", 'bar', baz)
> 颜色(例如:blue, #04a3f9, rgba(255, 0, 0, 0.5))
> 布尔值(例如: true, false)
> 空值(例如: null)
> 列表(list),用空格或逗号分隔 (例如:c 1.5em 1em 0 2em, Helvetica, Arial,
sans-serif)
> 映射(例如: (key1: value1, key2: value2))  map映射  键->值

2.9 数字&数字函数

在 SASS 中可以对数字进行运算
同时 SASS 支持数字函数的运算

 2.10 sass字符串

SASS 支持字符串的操作
同时 SASS 对字符串的操作有一些封装的函数的支持,方便快捷的处理字符串操作。
更多操作请参考官方文档。 http://sass.bootcss.com/docs/sass-reference/

 2.11 sass颜色

颜色的表示有很多种
> 十六进制 Hex:#ff0000 等等
> RGB:rgb(255, 0, 0)等等
> 字符串:red, blue, green 等等
> 等等.. ..
【注】SASS 支持所有这些颜色的表示方式 相信大家对这些颜色的表示方式应该非常熟悉了
颜色函数——rgb & rgba
通过 rgb()的形式进行颜色的控制【红、绿、蓝】

2.12 sass列表-list

list 表示列表类型的值
在 CSS 中就是表示属性的一串值
列表中的值可以使用空格或者逗号分隔,如
> border:#ccc solid 1px; 值就是列表
> font-family:Courier, “Lucida Console”, monospace; 值也是列表
列表中可以包含其他的列表,如:
> padding:10px 5px, 5px 5px; 值的列表中有两个列表,用逗号分隔
> padding:(10px 5px) (5px 5px);可以用括号分开,编译成 css 时会去掉这些括号

列表函数

SASS 中的列表相当于其他语言中的数组,SASS 也提供了一些函数方便列表的操作
length:获取列表长度
nth:获取指定位置的列表项
index:获取某个元素在列表中的位置,如果没有查询到返回 null
append:给指定的第一个列表添加一个列表项
join:合并列表

 2.13 sass映射map

map 就是列表项目中带名称的列表
>  $map:(key1:value1, key2:value2, key3:value3)
>  $var(key1:value1, key2:value2..):声明一个 Map
>  length($map):获取 map 中的元素对个数
>  map-get($map, key):获取$map 中名称为 key 的值
>  map-keys($map):获取指定$map 中所有的 key
>  map-values($map):获取指定$map 中所有的 value
>  map-has-key($map, key):判断在$map 中是否包含指定的 key
>  map-merge($map1, $map2):将$map1 和$map2 合并在一起
>  map-remove($map, key):将指定名称的 key 从$map 中移除

2.14 sass布尔值

SASS 中的布尔值,跟其他语言一样,都是用来表示真/假的逻辑判断的。
取值:true/false,sass 中可以使用比较运算符,返回的就是布尔值
> 比较运算符
> >、 >=、 <、 <=、 !=、 ==
> 逻辑运算符
> and、or、not

2.15 控制指令-control Directives

SASS 中为了更加方便的处理一些带有逻辑性的样式,如满足某些条件的时候使用指定的样
式,或者根据指定列表中的项目循环输出样式等,提供了一些控制指令进行处理
> @if:条件控制指令
> @for:循环指令
> @each:循环指令
> @while:循环指令
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的
样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式
【注】同样,也可以通过@else if 和@else 指令结合,进行多条件的判断

 2.16 sass-@for

@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式
> @for $var from <开始值> l <结束值>
> @for $var from <start> to <end>
<1>  to 和 through 都是表示一个区间
<2>  唯一的区别就是停止循环的地方不一样
<3>  $var 可以是任意一个变量名称如$i
<5>  <start>和<end>是 SASS 表达式并且必须是整数

2.17 sass-@each

@each 在 Sass 中主要被用来进行列表或者映射数据的循环
主要表示形式:@each $var in <list>
$var 可以是任意变量名称,<list>是 SASS 表达式并且必须是 List

 2.18 sass-@while

@while 指令在 SASS 中用于循环重复处理样式,直到@while 表达式返回 false

 

 

 2.19 sass用户自定义函数-function

函数的功能主要是数据的运算,SASS 中可以将一些值交给函数进行处理,具体的处理方式
由定义的函数具体的设计确定。
@function 函数名称(参数列表){
 // 数据处理
}

 2.20 sass警告 VS 错误

在自己设计的函数或者 Mixin 中,可以包含一些警告或者错误提示信息,用户在错误使用
函数或者 mixin 时,就会看到这样的错误提示。
> @warn:警告信息——会出现在命令行窗口中,编译提示
> @error:错误信息——会出现在编译后的 css 文件中,错误提示
@warn message; 警告信息,警告信息一般会在执行 scss 程序生成 css 时触发,所以
出现在命令行中。
@error message; 错误信息,错误信息直接显示在编译的 css 文件中。

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM