sass 学习笔记

安装sass的方法：

sass基于Ruby语言开发而成， 因此安装sass前需要安装Ruby

window下安装SASS首先需要安装Ruby， 先从官网下载Ruby并安装。 安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

安装完成后需测试安装有没有成功, 运行CMD输入以下命令： ruby - v

 

Ruby自带一个叫做RubyGems的系统， 用来安装基于Ruby的软件。 我们可以使用这个系统来 轻松地安装Sass和Compass。 要安装最新版本的Sass和Compass， 你需要输入下面的命令

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)

gem install sass

gem install compass

 

安装完成之后， 你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass - v

 

将scss编译成css的命令 

sass / style.scss: css / style.css

教程地址: https: //www.sass.hk/install/

 

自动监听scss文件发生变化 自动编译的命令

sass--watch sass: css

 

scss编译输出的有四种格式

nested 嵌套

compact 紧凑

expanded 扩展

compressed 压缩

 

生成指定的编译排版格式的命令（--style后面跟的是格式）

sass --watch sass:css--style compact

sass --watch sass:css--style expanded

 

 嵌套

使用 "&" 符号的地方会去引用父选择器

 

混合

定义mixin的方法

@mixin 名字(参数1，参数2){

    ...

}

 

调用定义的mixin的方法

div{

    @include 名字;

}

 

继承/扩展 

使用@extend  跟父类相关的都会被继承

 

partials与@import

partials文件要用"_"开头

 

@import "xx"

引号里面是要包含进来的scss文件 

注意：不需要输入文件名的"_"和文件名的扩展名

 

数据类型

sass -i

>> type-of(5) //number

 

数字类型的运算

sass -i

>> 10px + 5px //15px

 

字符串函数

to-upper-case(xx) //转换为大写

to-lower-case(xx) //转换为小写

str-length(xx) //计算字符串的长度

str-index(字符串,"要查找的字符") //查找指定字符的索引 从1开始的

str-insert("要插入到哪个字符串","插入的字符串",插入的位置)

 

颜色函数

rgb 与 rgba

hsl（色相、饱和度、明度） 与 hsla

adjust-hue 调整色相的值

lighten 与 darken 可以改变颜色的明度

lighten("要处理的颜色",增加的明度)

 

saturate 增加颜色的纯度

desaturate 减少颜色的纯度

 

transparentize 增加颜色的透明度

opacify 减少颜色的透明度

 

map与相关函数

 

$colors:(light:#ffffff,dark:#000000) //创建一个map

map-get($colors,dark)   //根据项目的名称来获取对应的值

map-keys($colors) //得到一个map中的所有key

map-values($colors) //得到一个map中的所有value

map-has-key($colors,light)   //判断一个map中是否有指定的Key

map-merge($colors,(light-gray:#e5e5e5))  //将两个map合并到一块

map-remove($colors,light,dark) //从map中移除一个项目

 

布尔值

 5px > 3px  //true

(5px > 3px) and (5px > 10px)  //false

(5px >3px) or (5px > 10px) //true

not (5px > 3px)   //false

 

interpolation 把一个值插入到另一个值中

 

$version:'0.1';

/* 当前项目的版本号是 #{$version} */

$name:"info";

$attr:"border";

.a1-#{$name} {

    #{$attr}-color: "#ccc";

}

 

控制指令

 

@if

 

@if(条件){

    ...

}

 

/* @if */

 

$user-prefixes:false;

.a3 {

    @if $user-prefixes {

        -webkit-border-radius: 2px;

        -moz-border-radius: 2px;

        -ms-border-radius: 2px;

        -o-border-radius: 2px;

    }

    border-radius: 2px;

}

 

$theme:"light";

.a4 {

    @if $theme==dark {

        background-color: #0000;

    }

    @else if $theme==light {

        background-color: #fff;

    }

    @else {

        background-color: aquamarine;

    }

}

 

@for

 

形式一：(包含结束值)

@for $var from <开始值> through <结束值> {

    ...

}

 

形式二：（不包含结束值）

@for $var from <开始值> to <结束值> {

    ...

}

$columns: 4;

@for $i from 1 through $columns {

    .col-#{$i} {

        width: 100% / $columns * $i;

    }

}

 

@for $i from 1 to $columns {

    .col2-#{$i} {

        width: 100% / $columns * $i;

    }

}

 

@each

 

@each $var in $list{

    ...

}

$icons:success error waring;

@each $icon in $icons {

    .icon-#{$icon} {

        background: url(../images/icons/#{$icon}.png);

    }

}

 

@while

 

@while 条件{

    ...

}

 

$i:6;

@while $i>0 {

    .item-#{$i} {

        width: 5px * $i;

    }

    $i:$i - 2;

}

 

用户自定义的函数以及警告与错误

@function 名称(参数1，参数2){

    ...

}

 

$colors:(light:#ffffff, dark:#000000);

@function color($key) {

    @if not map-has-key($colors, $key) {

        @warn "在$colors里面没有找到#{$key}这个key"

    }

    @return map-get($colors, $key);

}

 

.a5 {

    background-color: color(light1);

}