《Sass進階篇》是慕課網提供的慕課課程,授課老師是大漠。
基本介紹
- 中文名:Sass進階篇
- 提供方:慕課網
- 類別:慕課
- 授課老師:大漠
課程簡介,課程大綱,
課程簡介
Sass又名SCSS,是CSS預處理器之一,它能讓你更好的、更輕鬆的工作。這個系列教程是《sass基礎篇》課程的進級,對Sass其它較有難度的部分進行講解,包括常用控制命令、函式及規律。
課程大綱
第1章Sass的控制命令
Sass中控制命令指的是@if、@each、@for和@while。具有一定的邏輯判斷和循環遍歷能力,這個對於懂JavaScript或者後端語言的同學來說一點都不難。但在CSS中是不可思議的一件事情,最起碼到目前為止是不太可能的事情。但在Sass這樣的CSS預處理器語言中實現了。
1-1Sass課程簡介
1-2@if
1-3@for循環(上)
1-4@for循環(下)
1-5@while循環
1-6@each循環
第2章Sass的函式功能-字元串與數字函式
本章節講解Sass字元串與數字函式。
2-1Sass的函式簡介
2-2字元串函式-unquote()函式
2-3字元串函式-quote()函式
2-4字元串函式-To-upper-case()、To-lower-case()
2-5數字函式簡介
2-6數字函式-percentage()
2-7數字函式-round()函式
2-8數字函式-ceil()函式
2-9數字函式-floor()函式
2-10數字函式-abs()函式
2-11數字函式-min()函式、max()函式
2-12數字函式-random()函式
第3章Sass的函式功能-列表函式
本章節講解Sass列表函式。
3-1列表函式簡介
3-2length()函式
3-3nth()函式
3-4join()函式
3-5append()函式
3-6zip()函式
3-7index()函式
3-8Introspection函式
3-9Introspection函式-type-of()
3-10unit()函式
3-11unitless()函式
3-12comparable()函式
3-13Miscellaneous函式
3-14Map
3-15SassMaps的函式
3-16SassMaps的函式-map-get($map,$key)
3-17SassMaps的函式-map-has-key($map,$key)
3-18SassMaps的函式-map-keys($map)
3-19SassMaps的函式-map-values($map)、map-merge($map1,$map2)
3-20SassMaps的函式-map-remove($map,$key)、keywords($args)
第4章Sass的函式功能-顏色函式
本章講解Sass中自帶的顏色函式。
4-1RGB顏色函式-RGB()顏色函式
4-2RGB顏色函式-RGBA()函式
4-3RGB顏色函式-Red()、Green()、Blue()函式
4-4RGB顏色函式-Mix()函式
4-5HSL函式簡介
4-6HSL函式-lighten()
4-7HSL函式-saturate()
4-8HSL函式-adjust-hue()函式
4-9HSL函式-grayscale()函式
4-10Opacity函式簡介
4-11Opacity函式-alpha()、opacity()函式
4-12Opacity函式-rgba()函式
4-13Opacity函式-opacify()、fade-in()函式
4-14Opacity函式-transparentize()、fade-out()函式
4-15顏色函式實戰——七色卡
第5章Sass的@規則
Sass支持所有CSS3的@規則,以及一些Sass專屬的規則,也被稱為“指令(directives)”。這些規則在Sass中具有不同的功效。這一章就為大家講解。
5-1@import
5-2@media
5-3@extend
5-4@at-root
5-5@debug
5-6@warn
5-7@error