sass学习、sass语法、sass函数、编辑工具koala

sass学习

一、sass与scss的区别:

sass定义

sass是一种基于css的预处理语言,在css的基础上进行简化,sass可以定义变量、嵌套、扩展、条件判断、循环等功能。

sass目前有两种语法规则:sass、scss。

1) 第一种语法规则sass,又被称为缩进语法,该种语法不使用大括号、分号,而是通过缩进来指定块。文件扩展名为.sass
2) 第二中语法为scss,该语法与我们平时的css语法差不多,使用大括号、分号。scss是sass3引入新的语法,该语法完全兼容css3,并且继承了sass的强大功能,另外还能识别大部分css hacks和特定于浏览器的语法(这真是太好不过了)。文件扩展名为.scss

scss更和平常css写法类似,平常一般用scss作为后缀

二、sass语法

1.导入:@import

sass的导入规则与css有所不同。

2.注释

1)多行注释:/**/
2)当行注释://
css只有一种注释方式://

3.变量

1)普通变量:ex:$var:#ccc;

$colorPra: 12px;
body{
    font-size:$colorPra;
}

2)默认变量:ex: $var: 1.5 !default;【用来设置默认值】

$heightH1:        1.5 !default;
body{
    line-height: $heightH1; 
}

默认变量设置默认值,根据需求覆盖

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

3)特殊变量
该类变量可以设置 属性 或在某些特殊情况下使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

4)多值变量:list ,map

$pxA:500px 200px 300px ;//一维数组
$borderM:(1px solid #ccc),(2px dashed #000);  //二维数组
.aa{
    width:nth($pxA,1);
    height:nth($pxA,3);
    border:nth($borderM,1)
}
.bb{
 border:nth($borderM,2);
}

5)全局变量:!global

4.嵌套

1)选择器嵌套
2)属性嵌套
3)跳出嵌套:@at-root
@at-root (without: all/rule(默认值)/media/support)
@at-root (with: …)

5.混合:@mixin @include

1)无参数:

@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

2)有参数

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

等同于

.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

3)多个参数

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

等同于

.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

6.@content

7.继承:@extend

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

8.占位选择器: %

9.函数

在sass中有已经定义好的函数使用,比如我们经常使用的颜色函数:lighten( color, amount)和darken( color, amount),但是我们也可以自己定义自己需要的函数。

$fontSizeDefault:      16px !default;
$gray:              #000 !defualt;        

@function pxTorem($px) {
  @return $px / $fontSizeDefault* 1rem;  //将像素px转化为rem值
}

.aa{
  font-size:pxTorem(30px);
  background:$gray;
  &:hover{
     background:lighten($gray,10%);  //颜色函数计算
  }
}

10.运算:+- * /

进行运算的只能是可以进行 + = /* 的数值型属性(ex:数字、颜色、变量等),在进行运算的时候需要在运算符前后空格,否则会出错。

$pxA:500px 200px 300px ;//一维数组
.tt{
    color:#fff;
    width:1200px - nth($pxA,1); //进行-运算
}

11.条件判断及循环

1)@if 或者 @if @else if @else判断

$ifTrue :true;   //true false 在sass 可作为判断条件
.ab{
    @if $ifTrue{
        display:inline-block;
    }
}

结果为:

.ab {
  display: inline-block;
}

注:当$ifTrue 值为false 时,.ab类中的display是没有的。

2)三目判断
3)for循环
4)@each循环
5)多个字段list、map数据循环

四、函数统计

很多函数平常是用不上的,但是这里罗列出一些函数,方便以后使用

序号函数类别函数注释
1控制命令@if
2控制命令@for
3控制命令@while
4控制命令@each
5控制命令@for
6字符串函数unquote()
7字符串函数quote()
8字符串函数To-upper-case()、To-lower-case()
9数字函数percentage()
10数字函数round()
11数字函数ceil()
12数字函数floor()
13数字函数abs()
14数字函数min()、max()
15数字函数random()
16列表函数length()
17列表函数nth()
18列表函数join()
19列表函数append()
20列表函数zip()
21列表函数index()
22列表函数Introspection函数
23列表函数unit()
24列表函数unitless()
25列表函数comparable()
26列表函数Miscellaneous函数
27列表函数Map函数
28列表函数Maps函数:map-get($map,$key)、map-values($map)、map-merge($map1,$map2)
29列表函数Map函数map-has-key($map,$key)、map-keys($map)
30列表函数Map函数map-remove($map,$key)、keywords($args)
31颜色函数RGB()
32颜色函数RGBA()
33颜色函数Red()、Green()、Blue()
34颜色函数Mix()
35HSL函数lighten()
36HSL函数saturate()
37HSL函数adjust-hue()
38HSL函数grayscale()
39Opacity函数alpha()、opacity()
40Opacity函数rgba()
41Opacity函数opacify()、fade-out()

@规则:

序号
1@import
2@media
3@extend
4@at-root
5@debug
6@warn
7@error

五、工欲善其事必先利其器,sass编辑工具koala

这里写图片描述

koala用起来非常方便,在项目中使用sass时,该软件配合SublimeText使用,将scss文件自动编为css文件。

附上sass地址,保留地址,方便以后查看。

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

http://www.sass.hk/docs/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值