Maison > interface Web > tutoriel HTML > le corps du texte

sass 指令学习_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:53:20
original
940 Les gens l'ont consulté

格式化风格

nested      缩进嵌套css (默认的)expanded    没有缩进。扩展的csscompact    简洁格式的csscompressed   压缩之后的css
Copier après la connexion

变量

$blue: #fff;使用#{} 嵌套字符串$side:left;.test{    border-#{$side}-radius:5px}
Copier après la connexion

计算功能

使用 *  /   +     - 进行计算
Copier après la connexion


嵌套

原来代理div h1{    color:red;}// scss 可以这样div{    h1{        color:red;    }}在嵌套里面,可以使用&引用父元素,比如 a:hover的写法a{    &:hover{        color: red;    }}
Copier après la connexion


继承

比如已经有了class1 了.class1{    }这边class2可以继承 class1的.class2{    @extend .class1;}
Copier après la connexion

mixin

对于mixin有点像 c语言里面的宏,可以重用的代码块使用@mixin指令,定义一个代码块@mixin left{    float:left;    margin-left:10px}// 也可以指定参数和缺省值@mixin left($value:10px){    float:left;    margin-left:$value;}
Copier après la connexion

颜色函数

sass 提供一些内置的颜色函数
Copier après la connexion


插入文件

@import 方法
Copier après la connexion


@if 条件判断

@else 命令

@if 1 + 1 == 2 {  border: 1px solid; }
Copier après la connexion


循环语句 for / while 语句 each 语句

@for $i from 1 to 10 {    .border-#{$i} {      border: #{$i}px solid blue;    }  }        $i: 6;  @while $i > 0 {    .item-#{$i} { width: 2em * $i; }    $i: $i - 2;  }  
Copier après la connexion

自定义函数

@funcion double($n){    @return $n * 2;}
Copier après la connexion




Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal