sass的安装和基础语法

安装

1. 下载ruby安装包【官网非常慢ruby官网】

ruby-2.3.3-x64-mingw32.7z

2. 下载sass

sass-3.7.4.gem

• 方法一：

  ruby压缩包，解压即可，在bin目录下，使用命令gem install sass-3.7.4.gem安装sass

• 方法二：

gem install sass

在idea中使用

1. 安装File watcher插件
2. add SCSS监听器

programm: ruby/bin/scss.bat
# --no-cache:不生成缓存文件,--sourcemap=none:不生成map文件, -t expanded输出样式
arguments:--no-cache -t expanded --sourcemap --sourcemap=none $FileName$:$FileNameWithoutExtension$.css  
output path to refresh:$FileNameWithoutExtension$.css

配置参考

常见问题

1. 中文注释报错

在scss文件开头，写入@charset "utf-8"

sass语法

sass脚本

1. 变量

$text-color: red;  // -和_一样
p{
    color: $text-color;
}

2. 数据类型

序号	数据类型和描述	例子
1	Numbers 它表示整数类型。	2，10.5
2	Strings 它是在单引号或双引号内定义的字符序列。	'Tutorialspoint', "Tutorialspoint"
3	Colors 它用于定义颜色值。	red, #008000, rgb(25,255,204)
4	Booleans 它返回true或false布尔类型。	10 > 9 specifies true
5	Nulls 它指定空值，这是未知数据。	if(val==null)
6	Space and Comma 表示由空格或逗号分隔的值。	1px solid #eeeeee，0 0 0 1px
7	Mapping 它从一个值映射到另一个值。	FirsyKey:frstvalue，SecondKey:secvalue

3. 运算符

• 数字运算符

$a-width:10px;
a{
  width: $a-width - 5;  // 注意运算符前后必须有空格
}

• 颜色运算符

$color1: #333399;
$color2: #CC3399;
p{
	color: $color1 + $color2;  //  #ff66ff;
}

• 字符串运算符

p {
  font-size: 5px + 10px;  // 15px
}

• 布尔运算符

$age:20;
.bool {
    @if ($age > 10 and $age < 25) {
        color: green;
   }
}

4. sass括号

p {
  font-size:  5px + (6px * 2);  // 17px
  color:#ff0000;
}

5. sass函数

p {
  color: hsl($hue: 0, $saturation: 50%, $lightness: 50%);
}

6. 插值

p:after {
  content: "I have #{8 + 2} books on SASS!";
}

6. &SassScript

p{
    &:hover{}
}

7. 默认值

您可以通过向变量值的结尾添加！default 标志来设置变量的默认值。如果值已经分配给变量，则不会重新分配该值。

$myval1: null;
$myval1: "Sass Developed by Natalie Weizenbaum and Chris Eppstein" !default;

p:after {
  content: $myval1;
}

Sass @-规则和指令

1. @import

导sass、scss或者css，scss可以胜利后缀名。

部分是SASS或SCSS文件，它们使用下划线在名称（_partials.scss）开头写入 ， 可以在SASS文件中导入部分文件名，而不使用下划线

嵌套@import

e.g.

// _test1.scss
.container
{
background: #ffff;
}
// demo.scss
h4 {
  @import "test1";
}
//out
h4 .container {
  background: #ffff;
}

2. @media

.style{
    width: 900px;

    @media screen and (orientation: portrait){
        width:500px;
        margin-left: 120px;
    }
}
// out
.style {
  width: 900px;
}
@media screen and (orientation: portrait) {
  .style {
      width: 500px;
      margin-left: 120px;
  }
}
  

sass控制指令和表达式

1. if

h2{
  color: if( 1 + 1 == 2 , green , red);  // green
}

2. @if

p{
    @if 10 + 10 == 20   { border: 1px dotted;   }
    @if 7 < 2     { border: 2px solid;  }
    @if null    { border: 3px double; }
}

@if expression {
   // CSS codes
} @else if condition {
   // CSS codes
} @else {
   // CSS codes
}

3. @for

• from through

@for $i from 1 through 4 {
  .p#{$i} { padding-left : $i * 10px; }
}
// .p1,.p2,.p3,.p4

• from to

@for $i from 1 through 4 {
  .p#{$i} { padding-left : $i * 10px; }
}
// .p1,.p2,.p3

4. @each

@each $var in <list or map>

@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: #{$color};
  }
}
//out
.p_red {
  background-color: red; }
.p_green {
  background-color: green; }
.p_yellow {
  background-color: yellow; }
.p_blue {
  background-color: blue; }

• 多个值

@each $color, $border in (aqua, dotted),
                        (red, solid),
                        (green, double){
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}

• 多个分配与映射

@each $header, $color in (h1: red, h2: green, h3: blue) {
  #{$header} {
    color: $color;
  }
}
// out
h1{color:red}

5. @while

$i: 50;
@while $i > 0 {
  .paddding-#{$i} { padding-left: 1px * $i; }
  $i: $i - 10;
}
// out
.padding-50{
    padding-left: 50px;
}..

函数指令

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
  @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }