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 ...
随机推荐
- [MySQL]快速解决"is marked as crashed and should be repaired"故障
具体报错如下: Table '.\Tablename\posts' is marked as crashed and should be repaired 提示说论坛的帖子表posts被标记有问题,需 ...
- setTimeout中0毫秒延时
先来看段代码,思考一下执行的结果. alert(1); setTimeout(function(){alert(2);}, 0); alert(3); 估计很多人认为执行结果为1,2,3,原因就是认为 ...
- 8-15-Exercise
8-15-小练 这次的题目......只觉得泪奔啊......T T A.HDU 1042 N! 因为0<=n<=1000,故一定要用数组或字符串[同样因为n<=1000故用数组 ...
- [二]java运行原理
public class HelloWorld{ public static void main(String args[]){ System.out.println("hello" ...
- 【三支火把】---C语言面试问题总结
看了一份关于HR在面试一名C程序员可能提问的问题手册,学到了很多,很多都是一些琐碎的知识点,总是你写过很多大型的C程序,但是我敢说,里面也有你没掌握的东西. 1.全局变量和局部变量有何区别? 答:全局 ...
- JavaScript高级程序设计—阅读笔记(第一部分)
第一章 JavaScript简介1.JavaScript组成(核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM))2.文档对象模型(DOM),提供访问和操作网页内容的方法和 ...
- iOS 使用fir、 蒲公英 进行内部测试
fir 蒲公英需要去注册账号并认证,按提示即可完成. 测了公司账号.个人开发账号,2个都可以用,就是要在配置文件里加上测试者的udid. 步骤: 1.添加测试机的udid edit配置文件,添加刚刚加 ...
- iOS 开发中使用到的小技巧汇总
国庆即将来到,一个小项目也即将完成,把自己在项目中用的一些小技巧写出来,方便查找. 1,去掉分割线--动画设置透明度alpha //去掉tableView的分隔线: self.tableVie ...
- lua 学习笔记(一)
lua 中的方法: 1. type("test"): 返回数据类型 2.#"zhangsan": 返回字符串的长度 3.string.gsub("字符 ...
- iOS 基础知识
1获取系统语言设置 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; NSArray *languages = ...