sass和compass实战读书笔记（一）

sass优势：不做重复的工作

一消除样式表冗余（通过变量赋值的方式）

1. 通过变量来复用属性值　

　　 2. 使用嵌套来快速写出多层级的选择器　　

　　 3. 通过混合器来复用一段样式

　　 4. 使用选择器继承来避免重复属性

sass通过配置文件config.rb配置文件输出路径

sass基础语法

　变量声明局部变量和全局变量的概念 css代码块中定义的变量就是局部变量

　　$base-border:1px solid #ccc;

　　$plain-font:Helvetica、"Microsoft Yahei";

　　变量可以套用变量

　　$heightLight-color: #abcedf;

　　$heightLight-border: 1px $heightLight-color solid;

　　变量命名使用中划线和下划线的结果相同
　 $color_btn:red;
　 $color-btn:green;

　　button{color: $color_btn;} ----编译结果---- >button{color: green;} 样式被覆盖结果就是green

父选择器

.test{

    color:red;

    &:hover{

         color:green;

    }

}
--编译-->
.test{color:red;}
.test:hover{color:green;}

群组选择器的嵌套

.container{
　　h1, h2, h3{
　　　　margin-right:5px;
　　　　span{
　　　　　　color: red;
　　　　}
　　}
}

--编译之后---->

.container h1, .container h2, .container h3 {
　　margin-right: 5px;
}

.container h1 span, .container h2 span, .container h3 span {

　　color: red;
}

子组合选择器和同层组合选择器 > + ~

> 选择一个元素的直接子元素 article > section{border:1px solid #ccc;}

+ 同层相邻组合器 header + p{ color: red;} 紧邻header的p标签的color:red;

<header><p>我的字体不是红色的</p></header>
<p>我的字体是红色的</p>
<p>我的字体不是红色的</p>

~ 同层所有选择器 article ~section{border: 1px solid #ccc} 所有跟在article同层之后的section都修饰在article之前的section不被渲染样式

sass的导入

@import 导入scss文件可以全局导入和局部导入

//先定一个一个名为_blue-theme的scss局部文件

aside{

    background:red;

    color:white;

}

//另一个文件内部

@import "blue-theme"; // 引用文件可以不带下划线 后缀名 

也可以局部引入

div{

     @import "blue-theme";

}

--编译生成文件-->

div{

  aside{

    background:red;

    color:white;

  }

}

混合器传参

@mixin link-colors($normal, $hover, $visited){

    color: $normal;

    &:hover{color: $hover;}

    &:visited{color: $visited}

}

div{

 @include  link-colors(red,black,white); //第一种方式调用

 @include  link-colors(

                                     $normal：red,

                                     $hover  ：black,

                                     $visited：white

                                );                        //第二种方式调用

}

巴特西

sass和compass实战读书笔记（一）

最新文章

热门文章

巴特西

sass和compass实战 读书笔记（一）

最新文章

热门文章

sass和compass实战读书笔记（一）