美文网首页
sass的基本使用

sass的基本使用

作者: Hassd | 来源:发表于2018-06-03 20:38 被阅读0次

    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 继承      、、翻译后

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

    相关文章

      网友评论

          本文标题:sass的基本使用

          本文链接:https://www.haomeiwen.com/subject/fdcjsftx.html