Sass_公交sass-CSDN博客

一个CSS预编译框架

(给CSS的编写提供了编程的能力，增加了无限的可能性)

学习地址：

入门篇：http://www.imooc.com/learn/311

进阶篇：http://www.imooc.com/learn/436

这个玩意儿是使用Ruby语言编写的，那么就需要先下载Ruby环境 http://rubyinstaller.org/downloads

安装完成后，打开ruby的命令行

接下来我们通过ruby 的 gem 命令进行远程安装sass

注：在我们安装完ruby后若不能使用gem 命令，可能的原因是安装期间未能正确添加环境变量

此时可以手动添加：

1、找到安装ruby的目录下的bin文件位置，如：D:\Ruby22-x64\bin

2、将其添加至系统环境变量中，切记用分号 ; 结尾

但是由于网络以及翻墙等限制，安装经常失败。因此我们要更换一下网络源

gem sources --remove https://rubygems.org/

删除原有的，再添加新的源

你可以通过命令

gem sources -l

先查看一下网络源，如果没有显示，则可以自己添加源

gem sources -a http://gems.ruby-china.org/

接下来使用 gem install sass 命令安装

接下来我们在IDE中新建一个项目，然后在命令行进入这个目录

新建一个index.scss文件，使用sass的语法进行样式的编写

padding: 0; margin: 0;

}

使用 sass index.scss index.css 命令，将源文件编译成真正的css文件

这是生成了一个新的css文件，内容如下

看起来似乎没什么区别，不用着急，我们先学会如何编译，再来使用它的强大语法。

一些常见问题

每次写完文件都要命令行编译一次？

sass --watch index.scss:index.css

监听某个文件，实时编译

如果有很多文件，难道每个css都需要这样写？

sass --watch D:\workspace\scss:D:\workspace\css

监听某个文件夹，实时编译

有没有更好的解决方案？

Hbuilder中提供了一个插件，我们只需要将sass环境导入其中，就可以自动编译了。

配置：

--style=expanded --sourcemap=none --no-cache %FileName% %FileBaseName%.css

其中主题可以查询这里输出格式 (Output Style)

如何编写sass文件？

文件后缀名Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名，

语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似（推荐）。

index.scss

导入文件

@import "mixin";

注释

//单行注释

/* 
    多行注释
*/

注： sass中不支持中文注释，怎么办？

找到ruby的安装目录，里面也有sass模块，类似这样样的路径：

C:\Ruby\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass

在这里面有个文件叫engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require xxxxxx 之后即可。

定义变量

$fsv : 16px;
.test-fontsize {
    font-size: $fsv;
}

变量的拼接

$dir: left;
$space: 10px;

.test-var {
    margin-#{$dir} : $space;
    padding-#{$dir} : $space;
    border-#{$dir} : $space;
}

多值变量 - 数组，使用 nth(数组, index) 的方式来获取

$val: 100px;
$props: $val*0.6,$val*1.5, $w*2, $h*3;
.test-array {
    width: nth($props,1);
    height: nth($props,2);
    left: nth($props,3);
    top: nth($props,4);
}

多值变量-映射，使用 map-get( 映射, key) 的方式来获取

$list: (levela:(50px, 50px), levelb:(100px, 100px));  
@each $key,$val in $list {  
    .#{$key} {  
        width: nth($val,1);  
        height: nth($val,2);  
    }  
}  
  
//编译后  
.levela {  
    width: 50px;  height: 50px;  
}  
.levelb {  
    width: 100px; height: 100px;  
}

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
 );
.btn-dribble{
  color: map-get($social-colors,facebook);
}
//编译后
.btn-dribble {
  color: #3b5998;
}

嵌套

#box {
    position: relative;
    .main {
        .items {
            span {
                &.active {
                    color:red;
                }
            }
            a {
                &:hover {
                    color:blue;
                }
            }
        }
    }
}

注：& 表示当前选择器

mixin（混合） 使用 @include 方式加入

@mixin testmixin{
    margin: 20px;
    background: black;
}

//虽然是代码混合，但可以向函数一样灵活传参
@mixin opacity($val){
    opacity: $val;
    filter: alpha(opacity=$val*100);
}

//增加参数默认值
@mixin border-radius($val:1px){
    -moz-border-radius: $val;
    -webkit-border-radius: $val;
    border-radius: $val;
}

注：引入方法 @include border-radius(2px);

继承 extend，使用 @extend 方式继承样式

%pos {
    position: absolute;
    left:0; top:0;
}
#box{
    @extend %pos;
}

循环 @for 和 @each

$items: small,59px,36px,23px;
.#{nth($items,1)} {
    @for $i from 2 through 4 {
        .type-#{$i - 1} {
            width: nth($items, $i); 
        }
    }
}

$planeData: ((small,50px,46px,1),(middle,70px,90px,2),(large,60px,40px,3));
@each $size,$w,$h,$i in $planeData {
    .enemy-#{$size} {
        @extend %pos;
        width: $w;
        height: $h;
        background: url("imgs/plane#{$i}.png");
    }
}

常见的mixin函数

/**
     * 常用mixin
 */

//朝右三角形@include caret-right();
@mixin caret-right($left:0, $top:0) {
    width: 0;
    height: 0;
    border-left: 4px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    position: absolute;
    left: $left;
    top: $top;
    transform: translate(-50%,-50%);
}

//朝下三角形 @include caret-down();
@mixin caret-down($right:0, $top:0) {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    position: absolute;
    right: $right;
    top: $top;
}

//垂直居中  @include vertical_md();
@mixin vertical_md() {
    &:after {
        content: "";
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
}
//css3兼容 @include css3();
@mixin css3($property, $value){
    -webkit-#{$property} : $value;
    -moz-#{property} : $value;
    -ms-#{property} : $value;
}
//单行文本溢出使用  @include textOverFlow();
@mixin textOverFlow($width:100px) {
    width: $width;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
//清除浮动：@include clearfix();  
@mixin clearfix() {
    &:before,
    &:after {
        clear: both;
        content: '.';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
    }
    
}

函数

//-----------------------------------Black和White-----------------------------------------  
//background:black(0.15);  
//color:white(0.9);}  
@function black($opacity) {  
    @return rgba(0, 0, 0, $opacity)  
}  
  
@function white($opacity) {  
    @return rgba(255, 255, 255, $opacity)  
}

$bgc: #fff;
$li-color: (1, 10%),(2, 12%),(3, 14%),(4, 16%),(5, 18%);
ul {
    @each $index,
    $val in $li-color {
        li:nth-child(#{$index}) {
            background: darken($bgc, $val);
        }
    }
}

//darken（颜色，百分比） 举例： darken( #fff, 15%) 表示将 #fff颜色加深15% 
//生成
ul li:nth-child(1) {
    background: #e6e6e6;
}

ul li:nth-child(2) {
    background: #e0e0e0;
}

ul li:nth-child(3) {
    background: #dbdbdb;
}

ul li:nth-child(4) {
    background: #d6d6d6;
}

ul li:nth-child(5) {
    background: #d1d1d1;
}

//利用darken函数，将同一个颜色进行加深

@import指令

导入指令，导入SASS或者SCSS文件。它直接需要导入文件名。所有这一切都是导入SASS文件将在一个CSS文件中结合。但是也有一些编译为CSS，当我们使用@import规则，有几件事情需要注意：

文件扩展名为 .css
文件名以 http:// 开始
文件名是 url()
@import 构成任何媒体查询

例如，创建一个SASS文件，用下面的代码：

@import "style.css";
@import "http://www.yiibai.com/bar.css";
@import url(style);
@import "style" screen;

Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名，