前言：
为什么要学css编译器呢？如果只是自己纯手写的话，最后css比较的杂乱无章，而且css编译器可以提高具体的编程速度，且方便于管理，目前css编译器分为三种：sass ，less， stylus，这里的话我先从sass入门了，首先我是比较直接的，这里直接给你们提供了主要的案例。
这里我使用到的css的编译器是：
说到Koala 教程不得不提他怎么设置输出文件，点击scss文件选择：set output file 然后选择对应的文件夹，输入对应的名称。
webpack中关于sass，less的编译的一个教程，在后续深入学习webpack的时候可能会深入到怎么编译环节
把今天学的东西写一遍
1.导入 @import 路径
//a.scss body{ font-size: 12px; } //b.scss @import "a"; p{ background: #0982c1; } //编译得到的b.css body{font-size:12px} p{background:#0982c1}
2：注释
scss的注释和js的注释是一样的如下
//这个是单行注释 /* *这个是多行注释啦 * */
3：变量
1）默认变量
//a.scss $fontSize:12px; p{ font-size:$fontSize } //a.css p{ font-size:12px }
2）特殊变量
//a.scss $borderL:left; p{ boorder-#{$borderL}:1px solid; } //a.css p { boorder-left: 1px solid; }
3)多值变量
//a.scss
//一维变量 $borderL:20px 30px 40px 50px; p{ font-size:nth($borderL,1) } h1{ font-size:nth($borderL,2) } h2{ font-size:nth($borderL,3) } //a.css p { font-size: 20px; } h1 { font-size: 30px; } h2 { font-size: 40px; }
//a.scss //二维变量 $borderL:(20px 30px)(40px 50px); p{ margin:nth($borderL,1) } h1{ margin:nth($borderL,2) } //a.css p { margin: 20px 30px; } h1 { margin: 40px 50px; }
4:map 遍历
//a.scss $borderL:(h1:20px 30px,h2:40px 50px); @each $el ,$bbb in $borderL{ #{$el}{ margin:$bbb; } } //a.css h1 { margin: 20px 30px; } h2 { margin: 40px 50px; }
5:选择器的嵌套
//a.scss h1 { margin: 20px 30px; h2{ font-size:30px; color:#ccc; h3{ color:#666; } } } //a.css h1 { margin: 20px 30px; } h1 h2 { font-size: 30px; color: #ccc; } h1 h2 h3 { color: #666; }
属性的嵌套
//a.scss p{ border:{ left: 1px solid; top: 1px solid; } } //a.css p { border-left: 1px solid; border-top: 1px solid; }
跳出嵌套的命运@at-root
//a.scss h1{ font-size:20px; @at-root h2{ font-size:30px } } //a.css h1 { font-size: 20px; } h2 { font-size: 30px; }
@at-root (without: ...)和@at-root (with: ...)
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
6@mixin
//a.scss @mixin centerMiddle{ display: inline-block; text-align:center; vertical-align: middle; } p{ line-height:30px; @include centerMiddle } //a.css p { line-height: 30px; display: inline-block; text-align: center; vertical-align: middle; }
参数的传入：
//a.scss @mixin centerMiddle($bbb:20px){ display: inline-block; text-align:center; vertical-align: middle; font-size:$bbb; } p{ border: 1px solid; @include centerMiddle } //a.css p { border: 1px solid; display: inline-block; text-align: center; vertical-align: middle; font-size: 20px; } //传入参数的举个例子 //a.scss @mixin centerMiddle($bbb:20px){ display: inline-block; text-align:center; vertical-align: middle; font-size:$bbb; } p{ border: 1px solid; @include centerMiddle(80px) } //a.css p { border: 1px solid; display: inline-block; text-align: center; vertical-align: middle; font-size: 80px; }
传入多个参数
//a.scss @mixin centerMiddle($bbb:20px,$ccc:1px solid){ display: inline-block; text-align:center; vertical-align: middle; font-size:$bbb; border:$ccc; } p{ background:#ccc; @include centerMiddle(80px,2px solid) } //a.css p { background: #ccc; display: inline-block; text-align: center; vertical-align: middle; font-size: 80px; border: 2px solid; }
7@content
//sass style //------------------------------- @mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css style //------------------------------- @media only screen and (max- 480px) { body { color: red } }
8:继承@extent
//a.scss h1{ font-size:40px; } .bg-red{ background: red;} p{ @extend h1,.bg-red; color:red; } //a.css h1, p { font-size: 40px; } .bg-red, p { background: red; } p { color: red; }
9. %占位符，如果这个占位符没有被使用到就不会被编译出来
//a.scss %mar-l{ margin-left:20px; } %text-center{ text-align:center } h1{ font-size:20px; @extend %text-center } .text-center{ @extend %text-center } //a.css h1, .text-center { text-align: center; } h1 { font-size: 20px; }
10 函数
//a.scss $baseFontSize: 10px ; $gray: #ccc; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; } body{ font-size:$baseFontSize; color:lighten($gray,10%); } .test{ font-size:pxToRem(16px); color:darken($gray,10%); } //a.css body { font-size: 10px; color: #e6e6e6; } .test { font-size: 1.6rem; color: #b3b3b3; }
11运算
//a.scss $_columns: 12 !default; $_column- 60px !default; $_gutter: 20px !default; $_gridsystem- $_columns * ($_column-width + $_gutter); p{ font-size:$_gridsystem-width; } //a.css p { font-size: 960px; }
12、@if @else if @else
//a.scss $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //a.css .ib { display: inline-block; *display: inline; *zoom: 1; } p { color: green; }
13、三目判断
//a.scss p{ font-size:if(true, 12px,14px); } //a.css p { font-size: 12px; }
14、for循环
from to 不包含最后一个数
from through表示有到最后一个数
//a.scss @for $i from 1 through 3{ .itema-#{$i}{ font-size:20px*$i; } } @for $i from 1 to 3{ .itemb-#{$i}{ font-size:20px*$i; } } //a.css .itema-1 { font-size: 20px; } .itema-2 { font-size: 40px; } .itema-3 { font-size: 60px; } .itemb-1 { font-size: 20px; } .itemb-2 { font-size: 40px; }
15、@each循环
单个字段list数据循环
//a.scss
$animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } //css style //------------------------------- .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); } //a.css .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); } .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }
多个字段list数据循环
//a.scss $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } //css style //------------------------------- .puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; } //a.css .puma-icon { background-image: url("/images/puma.png"); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url("/images/sea-slug.png"); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url("/images/egret.png"); border: 2px solid white; cursor: move; } .puma-icon { background-image: url("/images/puma.png"); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url("/images/sea-slug.png"); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url("/images/egret.png"); border: 2px solid white; cursor: move; }
多个字段map数据循环
//a.scss $borderL:(h1:20px 30px,h2:40px 50px); @each $el ,$bbb in $borderL{ #{$el}{ margin:$bbb; } } //a.css h1 { margin: 20px 30px; } h2 { margin: 40px 50px; }