sass学习、sass语法、sass函数、编辑工具koala
2017-08-24 10:06
393 查看
sass学习
一、sass与scss的区别:
sass定义
sass是一种基于css的预处理语言,在css的基础上进行简化,sass可以定义变量、嵌套、扩展、条件判断、循环等功能。sass目前有两种语法规则:sass、scss。
1) 第一种语法规则sass,又被称为缩进语法,该种语法不使用大括号、分号,而是通过缩进来指定块。文件扩展名为.sass2) 第二中语法为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() | |
35 | HSL函数 | lighten() | |
36 | HSL函数 | saturate() | |
37 | HSL函数 | adjust-hue() | |
38 | HSL函数 | grayscale() | |
39 | Opacity函数 | alpha()、opacity() | |
40 | Opacity函数 | rgba() | |
41 | Opacity函数 | 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/
相关文章推荐
- html+css学习笔记:Sass语法学习
- .LESS/Sass/CoffeeScript编译工具推荐 – Koala
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- Thinkphp学习笔记-编辑工具Sublime license
- SASS界面编译工具——Koala的使用
- python爬虫学习(9) —— 一些工具和语法
- CMakeListx.txt 编辑语法学习
- SASS界面编译工具——Koala的使用
- SASS界面编译工具——Koala的使用
- <学习html>第二天笔记-标签分类、关系;开发工具;文档类型;标签语义化;HTML标签;问题“图像标签代码语法无误,但是图像显示不出来”
- Source Insight--艰难的编辑工具学习小记
- CMakeListx.txt 编辑语法学习
- Sass详解之编译工具koala
- Sass:初识Sass与Koala工具的使用
- CSS预处理器SASS用法和koala工具的使用
- web报表工具FineReport的公式编辑框的语法简介
- 【工具使用】【文本编辑】使用editplus学习java的快捷键使用总结
- web报表工具FineReport的公式编辑框的语法简介
- LaTex语法学习-公式编辑当中空格的写法
- 一步一步学习Swift之(二):好玩的工具playground与swfit基础语法