sass的基本使用

2018-06-03  本文已影响0人  Hassd

1.嵌套规则

翻译后

2.父选择器 &

翻译后

3.属性嵌套

翻译后

命名空间也可以包含自己的属性值

翻译为

4.注释 /* */ 与 //

//这种注释不会翻译出来

/**/这种注释可以翻译出来

可以设置变量    $qwe:"123"; 用    #{$qwe}输出

不管哪种注释用中文会出错(我的会)

5.运算

数学运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。

如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹

颜色值运算

翻译后

IE 滤镜要求所有的颜色值包含 alpha 层,而且格式必须固定 #AABBCCDD,使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

翻译后

字符串运算

+ 可用于连接字符串

如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号

运算表达式与其他值连用时,用空格做连接符

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

空的值被视作插入了空字符串

圆括号可以用来影响运算的顺序

翻译为

变量定义 !default

在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值

变量是 null 空值时将视为未被 !default 赋值

6.混合器

用@mixin   定义内容    用 @include 调用内容

翻译后

混合器也支持基本语法

翻译后

给混合器传参

混合器可以像方法一样传参  、翻译后

7.使用选择器继承来精简CSS

用 @extend 继承      、、翻译后

大概的基本用法就是这些、了解更多、请查看官网

上一篇下一篇

猜你喜欢

热点阅读