美文网首页
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基本使用

    主要用代码方式列一下sass中经常使用的一些基本的方法 1.变量:跟es6中的let一样具有块级作用域,必须先定义...

  • sass的基本使用

    1.嵌套规则 翻译后 2.父选择器& 翻译后 3.属性嵌套 翻译后 命名空间也可以包含自己的属性值 翻译为 4.注...

  • SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 操作符

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS- 局部文件(Partial)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • SASS - 输出格式

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

网友评论

      本文标题:sass的基本使用

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