美文网首页
scss与compass

scss与compass

作者: 陈志龙 | 来源:发表于2016-11-18 18:30 被阅读0次

    scss

    1、 scss是css的扩展语言
    2、注释:/* */(能被编译出来)和//(不能被编译出来)
    3、变量:用$开头,用;结尾,值后加!default,指定值为默认值
    4、嵌套:选择器嵌套和属性嵌套
    5、@at-root跳出嵌套
    6、&指父标签
    7、宏:sass中使用@mixin声明宏,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include调用。
    8、继承:@extend,后面跟要继承的选择器。
    9、函数:@function 函数名(参数){ @return 表达式;}
    10、运算:可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。运算符前后请留一个空格,不然会出错。
    11、条件判断:@if 判断表达式 { } @else if 判断表达式 { } @else { }
    12、三目运算:if($condition, $if_true, $if_false)
    13、for循环:for循环有两种形式,分别为:@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
    14、each循环:@each $var in <list or map> { }

    compass

    1、compass是sass/scss的工具库
    2、安装命令:gem install compass
    3、创建compass项目:compass create myproject
    4、scss编译成css:compass compile
    5、scss编译成min.css:compass compile --output-style compressed
    6、强制编译:compass compile --force
    7、自动编译:compass watch
    8、compass模块:css3、reset(重置)、layout(布局)、typography(版式)和utilities

    gulp

    gulp是前端css、js编译、合并、压缩等自动化工具,比grunt好用。

    相关文章

      网友评论

          本文标题:scss与compass

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