sass

教程

http://www.haorooms.com/post/sass_css 20160801看了一遍

http://www.w3cplus.com/sassguide/syntax.html

 

安装：

mac本来就安装了ruby，直接安装sass就行，要使用国内的镜像；

win7下ruby装在C盘了，

gem update sass

sass -v

sass -h

* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

 

基本用法

变量

$side : left;   //变量以$开头；变量值后加!default，表示默认值，用来设置默认值；覆盖，在之前重赋值就行
　.rounded {
	border-#{$side}-radius: 5px;    // 嵌套在字符串中#{}
}

所有变量以$开头
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

body {
　　　　margin: (14px/2);   //运算 （）
　　　　top: 50px + 100px;
　　　　right: $var * 10%;   //10 * 150% = 1500%； 10px * 150% error;
　　}

多值变量

list：类似js中的数组，可通过空格，逗号或小括号分隔，有很多函数

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

map：类似js中的对象；　　

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

全局变量：只是想法，现在没有局部变量，选择器中声明的变量会覆盖外面声明的全局变量；

变量值后加!global　 

 

可以使用计算公式

运算符前留个空格

三目运算

if(true, 1px, 2px) => 1px

 

嵌套

div h1 {
　　　　color : red;
　　}
//可以写成：
　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}
//属性也可以嵌套，比如border-color属性，可以写成：
　　p {
　　　　border: {    //属性嵌套 加:，一般不常用
　　　　　　color: red;
　　　　}
　　}
//注意，border后面必须加上冒号。

//在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：
a {
　　　　&:hover { color: #ffb3ff; }  //引用父元素，使用&
　　}

跳出嵌套：@at-root【@at-root(with:rule)】只会跳出选择器嵌套，不能跳出@media @support

//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

@at-root(without:media):共有四个值：all，rule，media，suopport　　support还无法广泛使用

 

注释

标准的CSS注释 /* comment / ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 
　　　　重要注释！
*/

一下比较好记
// sass
/* css */
/*! compressed */

 

继承

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

站位选择器%  没看懂

 

Mixin：可以选择性的传入参数：使用参数名和参数值同时传入；如果一个参数可以有多组值，则需要在形参后加三个点

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
使用的时候，根据需要加入参数：

div {
　　　　@include left(20px);
　　}

@content解决css3的@media问题

传参数用@mixin，非传递参数类用继承

 

颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

 

插入文件

@import：导入scss，不用加后缀，会合并；导入css，不会合并；基础的文件命名以_开头，导入的时候不用加_

 

条件语句

@if  @else

@if lightness($color) > 30% {
    　　　　background-color: #000;
    　　} @else {
    　　　　background-color: #fff;
    　　}

循环语句

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定义函数

@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

相等：==

 

写了那么多，基本用法有以下几部分：

变量：嵌套在字符串中

计算：/ + *

嵌套：属性，父元素

注释：3种

继承

mixin

颜色

文件

条件：循环

自定义函数

自己敲了一遍。

 

看了那么多，自己用的很少，所以不好理解。　　http://www.w3cplus.com/sassguide/syntax.html

 

tobe koala 调试

 

sass无法编译中文

解决办法：
1.koala可视化编译工具，
找到安装目录里面sass-3.3.7模块下面的engine.rb文件，例如下面路径：
C:/Program Files (x86)/Koala/rubygems/gems/sass-3.3.7/lib/sass
在这个文件里面engine.rb，添加一行代码
Encoding.default_external = Encoding.find('utf-8')
放在所有的require XXXX 之后即可。
2.命令行工具同理
找到ruby的安装目录，里面也有sass模块，如这个路径：
C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass
在这个文件里面engine.rb，添加一行代码（同方法1）
Encoding.default_external = Encoding.find('utf-8')
放在所有的require XXXX 之后即可。

mac下解决办法，scss文件前加@charset "UTF-8";

 

重装系统后，sublime text 3无法保存编译scss文件：

解决办法：需要安装ruby，淘宝的源有时不好用，可以用 http://gems.ruby-china.org/；再把需要的插件全都重装下。

 

路径名有中文 编译出错

 

用法一、使用variables.scss来保存用到的变量，通过@import "common.scss"; 这样，改变variables.scss就可以编译为不同的颜色。

 

20160801 打算把sass重新看一遍，简单的编译为css，不够强大和灵活。把bootstrap好好研究下，希望以后，用到bootstrap的，直接customize less；不用bootstrap的，按照bootstrap的来写less，最后编译为css。这算是一个提高。

 

[SASS入门教程及用法指南](http://www.haorooms.com/post/sass_css)
**现在用不到，但是重要的**
1、在nodejs中，通过sass命令和编译scss：
`sass --style compressed test.scss test.css`
四种编译风格
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。

2、sass可以watch file，但是一般用gulp更普遍些
3、内置的颜色函数
* lighten
* darken
* grayscale
* complement
4、条件 循环

[sass语法](http://www.w3cplus.com/sassguide/syntax.html)
1、后缀名：
.sass：没有{}，和；
.scss：跟css差不多，推荐
2、导入
>sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。BS就是这样用的。

3、多值变量 list map
4、全局变量，当前版本用不了；现在的机制：在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)
5、跳出嵌套
>默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

6、@keyframes **看不懂**
7、mixin
传递多组值参数
8、**@content**
9、建议传递参数的用@mixin，而非传递参数类的使用下面的继承%
10、如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
**这个特别好呀**
11、三目判断
if(true, 1px, 2px) => 1px

 

_variables.scss

@charset 'utf-8';

/* 默认变量的使用和覆盖*/
$color : steelblue;
$color : red !default;
$side  : left;

style.scss

@charset "UTF-8";

@import 'variables.scss';

.font-size-12{
  font:{
    size: 12px;
  }
}

@mixin left($value: 10px){
  float: left;
  margin: {
    left: $value;
  }
}

%clearfix{
  color: transparent;
}

@function double($n){
  @return $n * 2;
}

.container{
  /* 局部变量机制 */
  $color: black;
  color: $color;
  /* macro*/
  /* 与继承的区别是，macro可以指定缺省值和参数*/
  @include left(20px);
  /* 继承*/
  @extend .font-size-12;
  .test{
    /* 通过sass命令 才有效*/
    /*! 重要注释*/
    /* //, 只在sass中*/
    /* 计算*/
    width: 100px+50px;
    height: 100px;
    /* 属性嵌套*/
    background: {
      color: $color;
    }
    /* 变量放在字符串中*/
    border-top-#{$side}-radius: double(5px);
    /* &引用父元素，伪类需要*/
    &:hover{
      background:{
        color: $color;
      }
    }
    /* 内置的颜色函数，一般都是自定义的*/
    color: lighten(#cc3, 10%);
    /* 跳出选择器，可多个跳出，跳出所有的parent; 与&不同。*/
    @at-root .parent &{
      .test{
        color: red;
      }
    }
  }
  @extend %clearfix;  
}

　　

bootstrap-sass

_bootstrap-compass.scss

_bootstrap-mincer.scss

_bootstrap-sprockets.scss

不知道是做什么用的？　

 

问题

1、/

font-size: 20/14em; 错误
font-size: (20em / 14); 正确