-
@mixin functionName {}
查看全部 -
sass 引入,
@import ‘zxc’ zxc 中 $z=zx
sth=z
查看全部 -
跨游览器 normalize P,span等等
查看全部 -
sass @import 在编译时,将背引入的文件整合到css中
查看全部 -
变量操作:
1.直接操作变量,即变量表达式。
2.通过函数。
跟代码块无关的函数,多是自己内置函数称functions
可重用的代码块。称mixin
通过复制拷贝的方式使用,通过@include方式调用
使用时以组合声明方式存在,以@extend方式调用
——————————————————
H:60黄|120绿|180青|240蓝|300洋红|360红
S(saturation)饱和度
L(lightness)亮度
——————————————————
@mixin通过@include引入
@mixin col-6{ width:50%; float:left; }
.webdemo-sec{ @include col-6();//@mixin通过@include引入 &:hover{ background-color:#f5f5f5;// } }
带参数mixin
@mixin col ($width: 50%){//默认是50% width:$width }
.webdemo-sec{ @include col(50%);//引入时传递参数 &:hover{ background-color:#f5f5f5;// } }
继承@extend
.error{ color:#f00; } .serious-error{ @extend .error;//.serious-error插入到.error里 border: 1px #f00; }
查看全部 -
scss sass转换
sass -convert main.scss main.sass
---------------------------------------------
文件加下划线,局部文件
---------------------------------------------
@import"局部文件目录"
导入局部文件
@import所在的文件称为宿主文件
---------------------------------------------
reset浏览器默认样式全部清除
Normalize选择性的剔除替换
---------------------------------------------
sass不但提供类的嵌套也提供了属性的嵌套
.main-sec {//一个空格在类选择器后边 font-family { font:{ family:$main-sec-ff;//@import导入文件的变量 size:16px; } } }
查看全部 -
extend
查看全部 -
extend
查看全部 -
基于sass的既定规则
查看全部 -
使用css原生@improt的既定规则
查看全部 -
compass安装
gem install compass
查看版本
compass -v
创建compass框架
compass create 项目名称
查看全部 -
早期的sass采用.sass后缀,这是一种类Ruby语言,对空格敏感,且没有大括号。后来采用.scss后缀,和css语法很类似。
查看全部 -
sass: CSS with superpowers
查看全部 -
scss四种编译格式
expanded nested compact compressed
查看全部 -
if
if not
else
media
查看全部
举报