sass 入门教程
1、引言
众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了
2、安装
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。去官网下载Ruby并安装,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量
使用淘宝RubyGems镜像安装 sass
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
gem install compass
3、编译
sass test.scss test.css
SASS提供四个编译风格的选项
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
生产环境当中,一般使用最后一个选项。
sass --style compressed test.sass test.css
也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
4、嵌套
选择器嵌套
div {
h1 {
color:red;
}
}
属性嵌套
div {
h1 {
background:{
color:red;
url(xxx.jpg);
position:0 0;
}
}
}
引用父元素
a {
&:hover {
color: #ffb3ff;
}
}
5、变量
SASS允许使用变量,所有变量以$开头
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
6、mixin
使用@mixin命令,定义一个代码块
@mixin center($w:1180px){
width:$w;
margin:0 auto;
}
使用@include命令,调用这个mixin。
div {
@include center;
}
传参
div {
@include center(980px);
}
7、继承
现有一个class1类
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令
.class2 {
@extend .class1;
font-size:120%;
}
我们可以用占位符来写一些继承的样式(如“%one”),然后再通过@extend继承,这样就可以防止被渲染到CSS的规则集中
%test{ color:red; } .test1{ @extend %test; background:orange; } .test2{ @extend %test; background:red; } /* 编译后 */ /* line 120, sass/_order.scss */ .test1, .test2 { color: red; } /* line 124, sass/_order.scss */ .test1 { background: orange; } /* line 129, sass/_order.scss */ .test2 { background: red; }
8、插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令
@import "foo.css";
9、条件语句
使用@if……@else……定义一个三角形箭头函数
/* 箭头
arrow(direction,size,color);
*/
@mixin arrow($direction,$size,$color) {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
border-width: $size;
cursor: pointer;
@if $direction == top {
border-style: dashed dashed solid dashed;
border-color: transparent transparent $color transparent;
border-top: none;
}
@else if $direction == bottom {
border-style: solid dashed dashed dashed;
border-color: $color transparent transparent transparent;
border-bottom: none;
}
@else if $direction == right {
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $color;
border-right: none;
}
@else if $direction == left {
border-style: dashed solid dashed dashed;
border-color: transparent $color transparent transparent;
border-left: none;
}
}
10、循环
SASS支持for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错解决办法
找到ruby的安装目录,里面也有sass模块,如这个路径:C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb,添加一行代码:
Encoding.default_external = Encoding.find('utf-8') |
放在所有的require XXXX 之后即可。
最后在scss文件头部启用编码声明:
@charset "utf-8";//必须设置了这个才能编译有中文的注释 |
既然.scss
能通过sass
命令转译成.css
样式,那么我们是否可以将.css
转译成.scss
呢?
事实是可以的,我们可以通过sass-convert
命令:
$ sass-convert css/style.css style.scss
sass-convert
除了可以将.css
样式转译成.scss
文件之外,还可以通过这个命令对.sass
和.scss
之间样式转译。
安装compass-sourcemaps
$ gem install compass-sourcemaps --pre
在Compass项目配置文件config.rb中增加enable_sourcemaps配置
# enable sourcemaps enable_sourcemaps = true sass_options = {:sourcemap => true}
sass 入门教程的更多相关文章
- sass入门教程
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,必须先 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Sass介绍及入门教程
Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- webpack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- [一]初识Ajax
是什么? 一种网页交换数据的技术 作用: 使页面局部刷新,获取后台数据 怎么做? 调用浏览器内置对象发送异步请求
- HTML 的 iframe 元素
在 HTML 中, iframe 元素用于在网页中嵌入其它网页的内容,例如: <iframe src="http://example.com/abc.html">ifr ...
- 聊聊LAA(LARGE ADDRESS AWARE)
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:聊聊LAA(LARGE ADDRESS AWARE).
- java中用线程解决进出水问题
//进水 class Inflow implements Runnable{ //水对象 Water wat; public Inflow(Water w){ this.wat = w; } @Ove ...
- 在CentOS6上安装Redis
检查安装依赖程序 yum install -y gcc-c++ tcl wget 获取安装文件 wget http://download.redis.io/releases/redis-2.8.17. ...
- C# LINQ详解(一)
原文标题:How does it work in C#?-Part 3 (C# LINQ in detail),作者:Mohammand A Rahman. 目录 LINQ 基础 扩展方法-幕后的工作 ...
- Installing the PHP/MongoDB extension on Mac OSX 10.8
Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for ...
- java缓存算法【转】
http://my.oschina.net/u/866190/blog/188712 提到缓存,不得不提就是缓存算法(淘汰算法),常见算法有LRU.LFU和FIFO等算法,每种算法各有各的优势和缺点及 ...
- 自己动手写CPU之第七阶段(7)——乘累加指令的实现
将陆续上传本人写的新书<自己动手写CPU>.今天是第30篇.我尽量每周四篇 亚马逊的销售地址例如以下.欢迎大家围观呵! http://www.amazon.cn/dp/b00mqkrlg8 ...
- linux Page cache和buffer cache----- systemtap
http://shixm.iteye.com/blog/1724718 http://blog.csdn.net/dianhuiren/article/details/7543886