scss笔记

I belong to : Reading

嵌套CSS 规则

border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }

css只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求

sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

变量默认值

$fancybox-width: 400px !default; 在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。

css 中导入scss

sass导入到一个CSS规则内，如下所示：

.blue-theme {@import "_blue-theme.scss"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

与css @import区别

尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是CSS的url()值。

静默注释

在原生的css中，注释对于其他人是直接可见的,scss中

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

mixin

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//调用
a {
  @include link-colors(blue, red, green);
}
//或者
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

设置默认值

@mixin set-position($position: relative, $left: -1, $right: -1, $top: -1, $bottom: -1 ){
    position: $position;
    @if $left != -1 { left: $left; }
    @if $right != -1 { right: $right; }
    @if $top != -1 { top: $top; }
    @if $bottom != -1 { bottom: $bottom; }
}

@include set-position($position: absolute, $top: 50%);

选择器继承 @extend

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//通过选择器继承继承样式
.seriousError {
  @extend .error;
  border-width: 3px;
}


//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

继承一个html元素的样式,你对html元素添加的所有样式都会被继承。

不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控

文档

父选择器 &

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//编译为

#main { color: black; }
#main-sidebar {border: 1px solid; }

当父选择器含有不合适的后缀时，Sass 将会报错。

注释

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 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. */

!global

将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

颜色值运算

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
编译为

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }