scss使用

数据类型

sass目前支持六种数据类型

数字 1,4px
字符串包括有引号字符串和无引号字符串，"a",'a',a
颜色 white, rgba(255,255,255), #fff
布尔值 true,false
数组(list) 用空格或,做分隔符 1px solid red
maps,键值对 {key1:value1,key2:value2}

字符串

有引号字符串(quoted string),如'solid'
无引号字符串(unquoted string),如solid 只有使用#{}时,插入的字符串变量会被转为无引号字符串

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

//编译为
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

占位符选择器

为什么需要占位符选择？

因为占位符选择器不被@extend调用的话，不会产生任何代码，它取代以前 CSS 中的基类造成的代码冗余的情形。

//使用基类
.icon { 
    transition: background-color ease .2s; margin: 0 .5em; 
} 
.error-icon { 
    @extend .icon; /* error specific styles... */ 
} 
.info-icon { 
    @extend .icon; /* info specific styles... */ 
}
//编译后代码
.icon, .error-icon, .info-icon { 
    transition: background-color ease .2s; margin: 0 .5em;
} 
.error-icon { /* error specific styles... */ }
.info-icon { /* info specific styles... */ }

使用占位符选择器 不会定义一个.icon的类

%icon { 
    transition: background-color ease .2s; margin: 0 .5em; 
} 
.error-icon { 
    @extend %icon; /* error specific styles... */ 
} 
.info-icon { 
    @extend %icon; /* info specific styles... */ 
}
//编译后代码
.error-icon, .info-icon { 
    transition: background-color ease .2s; margin: 0 .5em;
} 
.error-icon { /* error specific styles... */ }
.info-icon { /* info specific styles... */ }

使用限制

不能在不同的@meida中运行

%demo1 {
    color:red;
}
%demo2 {
    background:blue;
}
@media screen {
    a {@extend %demo1}
    div {@extend %demo2}
}

报错信息：

错误原因: 当使用 @extends 时,其实是将一个选择器扩展到另一个选择器中去,比如上面例子中其实是拿.error-icon去替换%icon,这在media中是非法的行为。

解决方案:将占位符选择器定义在media中,在调用@extend时,将会将整个样式都包含在@media中去。

@media screen {
    %demo1 {
        color:red;
    }
    %demo2 {
        background:blue;
    }
}
a {@extend %demo1}
div {@extend %demo2}
//编译为
@media screen {
    a{color:red};
    div{background:blue};
}

注释的使用

sass有两种注释风格

单行注释

只保留在sass文件中，编译后会被省略

//这是一行单行注释
a {color:red};

//编译后
a {color:red};

多行注释

会保留编译到文件中

/*
    这是一段多行注释
*/
a{color:red};

//编译后
/*
    这是一段多行注释
*/
a{color:red}

在!作为多行注释的第一个字符，表示即使是压缩模式也要保留这条注释到css文件中

插值语句

可以将变量插入到注释中去

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

//编译后
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

sass使用笔记