Sass预处理语言

来源:互联网 发布:淘宝卖办公用品 编辑:程序博客网 时间:2024/06/05 12:03
一种CSS的预处理器。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

sass的变量定义格式
$变量名:属性值;
默认变量
sass的默认变量仅需要在值后面加上!default即可。
特殊变量
如果变量作为属性则必须要以#{$variables}形式使用。
全局变量
在变量值后面加上!global即为全局变量。

选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
在选择器嵌套中,可以使用&表示父元素选择器
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头

sass中使用@mixin声明混合
可以传递参数,参数名以$符号开始
多个参数以逗号分开,也可以给参数设置默认值。
声明的@mixin通过@include来调用。
传参时需要传入对应参数名与参数值(键值对方式传参)


基础继承
使用关键词@extend,后面紧跟需要继承的选择器

运算
数值型的Value (如:数字、颜色、变量等)可进行加减乘除四则运算
注意运算符前后请留一个空格,不然会出错。
@if判断
@if可一个条件单独使用,也可以和@else结合多条件使用



原创粉丝点击