Maison > interface Web > tutoriel HTML > 使用 sass/scss 编写CSS 快速上手_html/css_WEB-ITnose

使用 sass/scss 编写CSS 快速上手_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:46:32
original
1156 Les gens l'ont consulté


文章作者:松阳






Why Scss

CSS不是一种编程语言,它只是个配置文件,并没有生命。但我等大程序 怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概念。即,写是一套,用是一套。Scss是css预处理的一个选择,它依托于Ruby,算是逼格比较高的。相似的还有Less等,语言优劣之争意义不大,用好一个其他也是大同小异。

安装

Mac上自带Ruby,直接运行:

gem install sass
Copier après la connexion

安装对应模块,然后可以使用:

sass --watch style.scss:style.css
Copier après la connexion

命令来监视style.scss,当它有更改时,会自动编译成style.css。

友情提示: 我运行gem时完全不动,还以为是掉网了。后来听说是我大GFW威武,可以将源更改为x宝的服务器来解决:

$ gem sources -l$ gem sources --remove https://rubygems.org/  $ gem sources -a http://ruby.taobao.org/$ gem sources -l//然后我顺手更新了一下Ruby的版本$ sudo gem update --system 
Copier après la connexion

经过上面的折腾,顺利安装sass

常用语法

变量

//定义$magin : 30px; //px$blue : #1875e7; //color$side : left; //str Usage: boder-#{$side}-radius
Copier après la connexion

所有的数字类型的变量都可以进行相应的计算。

嵌套

nav {    ul {...}    border : { //注意冒号 相当于树形属性 会编译成 border-color:red        color : red;    }    a {        &:hover { color :$blue;} //&表示引用上层 会编译成 a:hover{...}    }} 
Copier après la connexion

注释

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

继承

使用@extend可以继承相应的css:

.class1 {    border:1px solid #ddd;}.class2 {    @extend .class1;    border-color: green;}
Copier après la connexion

写的时候要注意顺序,编译时,css是不会调顺序的,谁先谁后得想好了。

Mixin

这个是一个函数与宏的私生子。实现像函数,使用像宏。关键词为@mixin和@include

@mixin left($color, $value:10px) {    color:$color;    margin-left:$value;}.mydiv {    @include left($blue,15px);}
Copier après la connexion

颜色处理函数

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}
Copier après la connexion

用这个方法就能制作一个链接变灰的效果

引入文件

@import "style2.css";

逻辑编译

想要真正的动起来,就得有判断啦,循环啦常规流程函数。

@if可一个条件单独使用,也可以和@else结合多条件使用

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}
Copier après la connexion

for循环有两种形式,分别为:@for $var from through 和 @for $var from to 。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}
Copier après la connexion

each语法为:@each $var in 。其中$var表示变量,而list和map表示list类型数据和map类型数据。

$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }}$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}
Copier après la connexion

sublime 分页

其实这个也不能算是Scss的知识了,只不过是用到它更方便一些。Sublime可以左右分屏,我们可以将源文件放在左侧的窗口中编译后的放在右侧,方便我们做检查。Mac上的快捷键比较变态:

cmd+option+ctrl+2 
Copier après la connexion

左右移动使用

cmd+shift+[ 
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