sass和compass实战 读书笔记

Posted liuxiankun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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学习笔记 -- 在Windows系统中安装Sass和Compass

sass & compass 实战录

Sass与Compress实战:第四章

Sass与Compress实战:第五章

Sass与Compress实战:第六章

Compass/SASS - 并非所有文件都被编译