sass入门基础

一、sass 安装

sass 的安装依赖ruby 包管理工具，安装sass之前，应先安装ruby

1、ruby 安装

windows 下官网下载地址https://rubyinstaller.org/downloads/

安装完成后 查看版本 ruby -v

2、sass 安装

使用ruby 的包管理工具安装 gem install sass

查看sass 版本 sass -v

二、sass 编译

1、sass 的文件扩展名

.sass 和 .scss 两种，sass文件为sass最开始使用的缩进式语法，在sass3.0版本中的新的语法为sass css 文件扩展名为.scss 这种方式更接近于css

2、命令编译

sass sass/style.scss:css:/style.css

sass [.scss文件]:[编译后css输出文件]

3、添加监听器监听scss文件变化自动编译

sass --watch [scss文件目录]:[css输出目录]

sass --watch [scss文件目录]:[css输出目录] --style 输出格式

sass -i 进入sass的一个命令行交互模式

4、编译输出格式

编译输出有4中格式

1. nested 嵌套 【默认编译输出格式】

2. compact 紧凑

3. expanded 扩展

4. compressed 压缩

   ul {
   font-size: 15px;
   li {
   list-style:none;
   }
   }
   ==》
   嵌套
   ul {
   font-size: 15px; }
   ul li {
   list-style: none; }
   紧凑
   ul { font-size: 15px; }
   ul li { list-style: none; }
   扩展
   ul {
   font-size: 15px;
   }
   ul li {
   list-style: none;
   }
   压缩
   ul{font-size:15px}ul li{list-style:none}
   

三、sass 使用

1、变量的使用

​ 关键字符’$’, 变量名称可以使用下划线’_ ‘中杠’-'连字符, 变量可以嵌套使用

$custom-font-size: 15px;
$custom-border: 1px solid $custom-font-size;
ul {
font-size: $custom-font-size;
li {
border: 1px solid $custom-border;
list-style:none;
}
}
Interpolation 取值
$version:"0.0.1";
/* 项目版本#{$version}*/
$name:"info";
.alert-#{$name} {
#{$name}-color:#eee;
}

2、嵌套

Nesting

• 可以使用嵌套的写法简化 scss样式编写

  源文件scss	编译后css
  ul { font-size: 15px; li { list-style:none; } }	ul { font-size: 15px; } ul li { list-style: none; }

• 嵌套时调用父选择器&

引用父选择器 关键字符 ‘&’，&代表父选择器，多次调用父选择器简化写法

• 嵌套属性｛｝

  scss改写	scss 改写后
  body { font-family: ‘Open Sans’; font-size: 14px; font-weight: bold; font-style: normal; }	body { font: { family: ‘Open Sans’; size: 14px; weight: bold; style: normal; } }

  可以将一组属性用｛｝包起来

3、混合-Mixins

用于使用变量名字 定义引用的样式，使用时直接导入名称
定义
@Mixins 名字(参数1, 参数2...) {
...
}
使用
@include 名字

添加参数写法

使用变量的方式定义颜色传参，darken 为sass的颜色函数，darken() 函数会让颜色变得更暗10%返回新颜色

同样的函数有：lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和invert()

冒号表示当前元素本身的属性 空格表示当前元素的下一级元素（子元素）

4、Partails 与 @import

Partails 的文件是以下划线_开头：__bootstrap-variables.scss

其他scss 文件引入Prartail ,将scss查分为多个小部分 ，每个partail 就是个scss文件

使用@import 导入 @import __bootstrap-variables.scss

5.sass中注释

​ 三种注释：单行注释和多行注释、强制注释

单行注释不会出现在编译之后的css文件中

// one row 不会出现在css中
/*
multiple rows 而在压缩类型的css中会去掉
*/
/*！ force multiple rows
一直出现在css文件中*/
.alert-warning {
@include alert($alert-bg-color:#fff, $alert-color:#000);
}

6、数据类型

number/list/color/string

测试 sass -i 在交互模式下
type-of()
>> type-of(5)
"number"
>> type-of(5px)
"number"
>> type-of(xiaoxi)
"string"
>> type-of('xiaoxi')
"string"
>> type-of(1px solid #000) 这种类型中间用空格隔开
"list"
>> type-of(#fff)
"color"

数字类型 数学运算

注意括号()

>> 2 + 2
4
>> 2 * 2
4
>> (8 / 2 )
4
>> (8px / 2 )
4px
>> (8px - 2 )
6px
>> (8px - 2px )
6px
>> (8px * 2px )
16px*px
>> (8px * 2 )
16px
>> (8px / 2px )
4
>> (8px / 2 )
4px
>> 3 + 2 * 4px
11px
>> (3 + 2) * 4px
20px

数字函数

abs()绝对值round()4舍5入 ceil()向上取整 floor() 向下取整 percentage() 百分比 min()最小值 max() 最大值

10px
>> abs(-10px)
10px
>> abs(-10.2px)
10.2px
>> round(3.5)
4
>> round(3)
3
>> round(3.2)
3
>> ceil(3.2)
4
>> floor(3.8)
3
>> percentage(650 / 1000)
65%
>> percentage(650px / 1000px)
65%

7、字符串

字符串连接

字符串连接注意 引号 带引号与不带引号，带引号的字符串中间可以加空格

>> "xiao" + xi
"xiaoxi"
>> xiao + xi
"xiaoxi"
>> xiao + "xi"
"xiaoxi"
>> xiao - xi
"xiao-xi"

函数

to-upper-case() 将字符串转大写to-lower-case() 将字符串转小写

str-length() 取长度 str-index() 获取位置 str-instert()向指定位置插入字符

8、颜色

颜色表色:

颜色单词 、RGB(255,0,0)->red green blue 、16进制 #fff #000、hsl(色相, 饱和度%, 明度%)

颜色函数

• rgb(红,绿,蓝) 与rgba(红,绿,蓝,透明度)
• hsl(色相, 饱和度%, 明度%) 与hsl(色相, 饱和度%, 明度%,不透明度[0-1])
• adjust-hue(颜色，123deg) degrade降低
• lighten(颜色，20%) 增加颜色明度20% 与darken(颜色，20%) j降低颜色明度20%
• saturate(颜色，20%) 增加颜色饱和度20% 与desaturate(颜色，20%) j降低颜色饱和度20%
• opacify(颜色，0~1) 增加颜色不透明度20% 与transparentize(颜色，0~1) j降低颜色不透明度20%
• rotate()函数能够旋转元素，它主要是在二维空间内进行操作，通过一个角度参数值，来设定旋转的幅度。rotate(-45deg) 角度值deg，弧度值rad，梯度gard，转/圈turn
• rotate3d()函数可以实现一个3维空间内的旋

9、列表

list

列表表示属性的一串值使用逗号/空格、括号分隔

border: 1px solid #fff 空格
font-family: Courier, "lucida console", monspace 逗号
padding: 5px 10px, 5px 0 两个列表使用逗号分隔
padding: (5px 10px)(5px 0) 两个列表使用逗号分隔

函数 length() 列表长度

nth(list,index) 获取列表指定index的项

index(list,项) 获取项在列表中的位置

append(list, 项) 向列表添加项

join(list1,list2,分隔符[comma逗号]) 列表拼接使用指定分隔符

map

定义 $map:(key1:value2,key2:value2)
$colors:(light:#ffffff,dark:#000000)

函数 length() ; map-get(map,dark) 取map指定的key值

map-keys(map) 获取map的所有key

map-values(map) 获取map的所有value

map-has-key(map, lightkey) 判断map中是否包含指定key

map-merge(map1,map2) 将2个map合并返回新map

map-remove(map,key1,key2…) 移除map中指定的key,可以移除多个

10、布尔值

逻辑运算 >, < ,and ,() ,not

11、控制指令 control directives

• @if @else @else if

  @if 条件{...}
  $show: true;
  .rounded {
  @if $show {
  font-size: 15px;
  } @else {
  font-size: 10px;
  }
  color: red;
  @if $show {
  font-size: 15px;
  } @else if $show == true {
  padding:5px 0
  }
  }
  

• @for

  @for $var from <开始值> to[不包含结束值]/through[包含结束值] <结束值> {}
  $columns:4
  @for $i from to/through $columns {
  .col-#{$i}{
  width: 100%/ $columns * $i
  }
  }
  

• @each

  @each $var in $List {}
  $icons: success error warning
  @each $icon in $icons {
  .icon-#{$icon} {
  background-color:$icon;
  }
  }
  

• @while

  @while 条件 {}
  $i: 6;
  @while $i >0 {
  .item-#{$i} {
  width: 5px * $i;
  }
  $i = $i -2;
  }
  

12、自定义函数及错误警告

@function 名称(参数1,参数2) {}
$colors:(ligth:#fff,dark: #000)
@function color($key) {
@if not map-has-key($colors,$key) {
@warn "在 $color 中没有找到#{$key}这个key"
@error "在 $color 中没有找到#{$key}这个key"
}
@return map-get($colors, $key);
}
body {
background-color:color(light)
}

13、警告与错误

@function 名称(参数1,参数2) {}
$colors:(ligth:#fff,dark: #000)
@function color($key) {
@return map-get($colors, $key);
}
body {
background-color:color(light)
}

14、css3 规则

@keyframes animationname {keyframes-selector {css-styles;}}
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite[无限的];
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

最后

以上就是陶醉美女为你收集整理的sass入门基础的全部内容，希望文章能够帮你解决sass入门基础所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。