菜鸟的 Sass 学习笔记
介绍
sass 是什么?? 在sass的官网,它是这么形容给自己的
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
sass 是世界上最成熟稳定强大的css扩展语言。
sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件。
css兼容:Sass与所有版本的CSS完全兼容。
功能丰富:Sass拥有比任何其他CSS扩展语言更多的功能和能力。
成熟:Sass由其热爱的核心团队积极支持十多年。
社区:Sass由几家科技公司和数百名开发商的联盟积极支持和开发。
构架:有无数的框架与Sass建立。 Compass, Bourbon, Susy 等等。
安装
先安装Ruby,再安装sass →gem install sass
更详细的安装→http://sass-lang.com/install
学习记录
1.变量
对于一个项目比如说像主要的颜色,或者说所有border的样式,这些比较重要的信息或者是在项目中重复使用的,在sass可以使用$来定义变量。
如果遇到突然项目整一个的border的颜色要改变,那么我们直接修改定义的变量border的颜色就可以了。
例:
//定义变量
$primary-border:1px solid #eee;
$primary-color:#488aff; //使用变量
.test{
border: $primary-border;
color: $primary-color;
} //编译结果
.test {
border: 1px solid #eee;
color: #488aff;
}
2.嵌套
sass允许css规则彼此嵌套,它具有明确的嵌套和可视化层次结构。但是请注意过度的嵌套会导致后期难以维护。
例如:
#main p {
color: #00ff00;
width: 97%; .redbox {
background-color: #ff0000;
color: #000000;
}
}
编译后:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
引用父选择器
使用&来替代父选择器,&必须在复合选择器的开头,甚至可以跟一个被添加到父选择器的后缀
例:
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
&-sidebar {
border: 1px solid;
}
}
编译后:
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}
#main-sidebar {
border: 1px solid;
}
嵌套属性
比如font-family
,font-size
和font-weight
都在font
命名空间,如果在同一个命名空间设置很多它的属性,挺麻烦的,sass提供这样的方式,只要写一次命名空间,然后嵌套他的每个子属性。
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
属性名称空间本身还可以有一个值
例如:
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
编译后:
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
3.注释
Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留,而单行注释编译后就被删掉了。
例
/* 我是
* 多行
* 注释
*/
//我是我是我是单行注释
body {
color: black; }
编译后:
/* 我是
* 多行
* 注释
*/
body {
color: black;
}
如果是很重要的注释,即使是压缩模式编译后也存在/*加一个感叹号
/*!
* 超级重要注释
*/
在注释中也可以使用变量
$version: "1.0.0";
/* 版本号 #{$version}. */
编译后
/* 版本号 1.0.0. */
4.Import
假设现在有两个sass文件,bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。
然而导入的可是css文件,http:// 或者是url()
比如:
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
也可以一个import导入多个
@import "rounded-corners", "text-shadow";
这是一个示例:
_part.scss
ul,
ol {
margin:;
padding:;
}
base.scss
@import 'reset'; body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
@import
嵌套导入
例如现在有一个这个example.sass文件里面有以下内容
.example {
color: red;
}
导入example
#main {
@import "example";
}
编译结果
#main .example {
color: red;
}
5.Mixin
我们使用@mixin定义一个代码块,然后用@include调用这个代码块。
@mixin border{
border:1px solid #ee;
} div{
@include border
}
编译后:
div {
border: 1px solid #ee;
}
还可以指定参数
@mixin border($color:#eee){
border:1px solid $color;
}
div{
@include border(#eee);
}
6.颜色
颜色值支持所有算术运算
p {
color: #010203 + #040506;
}
计算01 + 04 = 05
,,02 + 05 = 07
和03 + 06 = 09
,并编译为:
p {
color: #050709; }
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
} //编译为:
p {
color: rgba(255, 255, 0, 0.75); }
它还提供了一些内置的颜色函数
hsl($ hue,$ saturation,$ lightness):从色调,饱和度和亮度值创建颜色。 hsla($ hue,$ saturation,$ lightness,$ alpha):从色调,饱和度,亮度和Alpha值创建颜色。
还有更多的关于内置的颜色函数可以看这里 →http://sass-lang.com/documentation/Sass/Script/Functions.html
7.继承@extend
sass允许一个选择器去继承另外一个选择器.
.test1 {border: 1px solid #eee;}
.test2 {@extend .test1;color:white;}
编译后
.test1, .test2 {
border: 1px solid #eee;
} .test2 {
color: white;
}
8.@debug
@warn @error
@debug和@warn,指令将SassScript表达式的值打印到标准错误输出流,它有助于调试。
@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"
输出
WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出
9.控制指令和表达式
sass支持基本的控制指令和表达式控制,指令是高级功能,下来来介绍一下。
@if()
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
编译后
p {
border: 1px solid; }
@if
声明可以跟着几个@else,@if
语句和一个@else
语句。如果@if
语句失败,@else if
则会按顺序尝试这些语句。
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译后
p {
color: green; }
@for
该@for
指令重复输出一组样式。对于每次重复,使用计数器变量来调整输出。
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译后
.item-1 {
width: 2em;
} .item-2 {
width: 4em;
} .item-3 {
width: 6em;
}
@each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.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");
}
@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
编译后
.item-6 {
width: 12em;
} .item-4 {
width: 8em;
} .item-2 {
width: 4em;
}
10.功能指令#function
可以在sass中定义自己的函数,并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。
例如:
//定义变量
$grid-width: 40px;
$gutter-width: 10px; //自定义函数
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
} //使用
#sidebar { width: grid-width(5); } //编译结果
#sidebar {
width: 240px;
}
编译
sass编译输出的默认CSS样式,可以执行-style
命令行来选择四种不同的输出样式
:nested
nested
样式是默认的Sass样式,因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行,但缩进不是常量。根据嵌套的深度,每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用:它可以让您轻松掌握文件的结构,而无需实际读取任何内容。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
:expanded
expanded
是一个更典型的人造CSS风格,每个属性和规则占一线。属性在规则中缩进,但是规则不以任何特殊方式缩进。
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
:compact
compact
采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行,每行都在该行上定义。嵌套规则彼此相邻,没有换行符,而单独的规则组在它们之间具有换行符。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
:compressed
compressed样式占用尽可能少的空间,除了分隔选择器和文件末尾的换行符之外,没有空格。它还包括一些其他轻微的按压,例如选择最小的颜色表示。这并不意味着人的可读性。
#main{color:#fff;background-color:#000}#main p{width:10em}
ps:
sass 官网 →http://sass-lang.com/
sass github →https://github.com/sass
sass一个在线将sass编译为css的网站 →https://www.sassmeister.com/
此随笔乃本人学习记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
菜鸟的 Sass 学习笔记的更多相关文章
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- 菜鸟的MySQL学习笔记(一)
本学习笔记是照搬慕课网<与MySQL的零距离接触>内容,特此感谢! 1-1 mysql的安装与配置 Windows环境下的MSI安装: 1.安装: 双击MSI文件->用户协议-> ...
- sass学习笔记1
less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...
- SASS学习笔记!(持续学习中..)
工具 : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html http://sass-lang.com/documentation/ ...
- Sass学习笔记
语法 @each $var in <list>//循环就是去遍历一个列表,然后从列表中取出对应的值 @while $types > 0 //循环直到函数不成立 SASS函数 To-u ...
- SASS学习笔记(1)
序 之前稍微看过SASS的文档,但是由于工作中没有涉及,渐渐的搁置了.最近公司新招来一个热情似火的前端,不管什么技术,不管自己能不能hold住,都提出来用一用再说.这样对我也好,跟着这个哥们混妥妥的长 ...
- sass学习笔记2
今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素 ...
- SASS学习笔记2 —— 语法
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass ...
随机推荐
- Redis 内存管理与事件处理
1 Redis内存管理 Redis内存管理相关文件为zmalloc.c/zmalloc.h,其只是对C中内存管理函数做了简单的封装,屏蔽了底层平台的差异,并增加了内存使用情况统计的功能. void * ...
- 1.如何使用vbs打开网页并且登陆
例如自动打开繁星的网页并且登录 Private Sub CommandButton1_Click() Dim ie As Object Set ie = CreateObject("Inte ...
- App Extensions篇之Share Extension
转载请注明出处:http://www.cnblogs.com/zhanggui/p/7119572.html 1.前言 这里主要是对App Extension的一些介绍以及详细给大家介绍一下Share ...
- How to install MySQL on CentOS
1)chekc centos中是否安装了MySQL [root@localhost MySQL]# rpm -qa | grep mariadb mariadb-libs-5.5.52-1.el7.x ...
- OpenGL的配置与搭建
一.项目中所使用的OpenGL扩展库有: 1. freeglut-3.0.0 2. glew-2.0.0 3. glm-0.9.7.3 二.添加扩展库文件 在工程项目文件夹里面添加OpenGLExte ...
- xhr.readyState的就绪状态
0:初始化,XMLHttpRequest对象还没有完成初始化 1:载入,XMLHttpRequest对象开始发送请求 2:载入完成,XMLHttpRequest对象的请求发送完成 3:解析,XMLHt ...
- 【SqlServer系列】表连接
1 概述 1.1 已发布[SqlServer系列]文章 [SqlServer系列]MYSQL安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 1.2 本篇 ...
- java编译出错信息汇总(更新)
1. java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 原因:缺包mysql-connector-java-5.1.7-bin.jar 2 ...
- Java基础语法<八> 继承
1.超类和子类 超类和子类 父类与子类 多态: 一个对象变量可以指示多种实际类型的现象称为多态 一个变量可以引用父类对象,也可以引用其子类对象,这就是多态. 不能将一个超类的引用赋给子类变量,因为调用 ...
- maven 打包时mapper.xml打不进去问题
首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...