sass-基础
导入:
sass的导入(
@import
)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如
@import 'reset.css'
,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import
方式存在。所有的sass导入文件都可以忽略后缀名
.scss
。一般来说基础的文件命名方法以_开头,如_mixin.scss
。这种文件在导入的时候可以不写下划线,可写成@import "mixin"
。例子:
a.scss:
body { background: #eee; }
b.scss:
@import "reset.css";
@import "a";
p{ background: #0982c1;}转译出来的b.css样式:
@import "reset.css";
body { background: #eee; }
p{ background: #0982c1;}
注释
标准的css注释
/*
*我是css的标准注释
*设置body内距
*/
body{
padding:5px;
}双斜杆单行注释
单行注释跟JavaScript语言中的注释一样,使用又斜杠(
//
),但单行注释不会输入到CSS中。
3:变量
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。
3.1普通变量
定义之后可以在全局范围内使用。
$fontSize: 12px;
body{ font-size:$fontSize; } ==》 body{font-size:12px}
3.2默认变量
sass的默认变量仅需要在值后面加上
!default
即可。$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; } ==》 body{ line-height:1.5; }
sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; } ==》 body{ line-height:2; }
3.3特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以
#{$variables}
形式使用。$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
} ==》 .border-top{ border-top:1px solid #ccc; }
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
} ==》 body { font: 12px/1.5; }
3.4多值变量
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
list
list数据可通过空格,逗号或小括号分隔多个值,可用
nth($var,$index)
取值。关于list数据操作还有很多其他函数如length($list)
,join($list1,$list2,[$separator])
,append($list,$value,[$separator])
等,具体可参考sass Functions(搜索List Functions
即可)定义
//一维数据
$px: 5px 10px 20px 30px;
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);使用
$linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
==》
a{ color:#08c; }
a:hover{ color:#333; }map
map数据以key和value成对出现,其中value又可以是list。格式为:
$map: (key1: value1, key2: value2, key3: value3);
。可通过map-get($map,$key)
取值。关于map数据还有很多其他函数如map-merge($map1,$map2)
,map-keys($map)
,map-values($map)
等,具体可参考sass Functions(搜索Map Functions
即可)定义
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用
//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
} ==》
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}3.5全局变量
在变量值后面加上!global
即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量。
嵌套(Nesting)
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。4.1选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
在选择器嵌套中,可以使用
&
表示父元素选择器#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;&:hover{
color:#ddd;
}
}
}==》
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}4.2属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。拿个官网的实例看下:.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}==》
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
5:@at-root
sass3.3.0中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。
普通跳出嵌套
//没有跳出
.parent-1 {
color:#f00;
.child {
width:100px;
}
}
==》
.parent-1 {color: #f00; }
.parent-1 .child {width: 100px; }
//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}
==》
.parent-2 {color: #f00; }
.child {width: 200px; }
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
==》
.parent-3 {background: #f00; }
.child1 {width: 300px; }
.child2 {width: 400px; }
@at-root (without: ...)
和@at-root (with: ...)
默认@at-root
只会跳出选择器嵌套,而不能跳出@media
或@support
,如果要跳出这两种,则需使用@at-root (without: media)
,@at-root (without: support)
。
这个语法的关键词有四个:all
(表示所有),rule
(表示常规css),media
(表示media),support
(表示support,因为@support
目前还无法广泛使用,所以在此不表)。
我们默认的@at-root
其实就是@at-root (without:rule)
。
//跳出父级元素嵌套
@media print {
.parent1{
color:#f00;
@at-root .child1 {width:200px; }
}
}
==>
@media print {
.parent1 {color: #f00; }
.child1 {width: 200px; }
}
//跳出media嵌套,父级有效
@media print {
.parent2{
color:#f00;
@at-root (without: media) {.child2 {width:200px; } }
}
}
==>
@media print { .parent2 {color: #f00; } }
.parent2 .child2 {width: 200px; }
//跳出media和父级
@media print {
.parent3{
color:#f00;
@at-root (without: all) {.child3 {width:200px;} }
}
}
==>
@media print {.parent3 {color: #f00; } }
.child3 {width: 200px; }
@at-root
与&
配合使用
.child{
@at-root .parent &{ color:#f00; }
}
==》
.parent .child {color: #f00; }
6:混合(mixin)
sass中使用@mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin
通过@include
来调用。 6.1无参数mixin
定义:
@mixin center-block { margin-left:auto; margin-right:auto; }
使用:
.demo{
@include center-block;
}
结果:
.demo{ margin-left:auto; margin-right:auto; } 6.2有参数mixin
定义:
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
使用:
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
6.3多个参数mixin
调用时可直接传入值,如@include
传入参数的个数小于@mixin
定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。
定义:
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
编译后:
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
多组值参数mixin
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...
。
//box-shadow可以有多组值,所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
编译后:
.box{
border:1px solid #ccc;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}
@content
@content
在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin
接受一整块样式,接受的样式从@content开始。
@mixin max-screen($res){
@media only screen and ( max-width: $res ) {
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
编译后:
@media only screen and (max-width: 480px) {
body { color: red }
}
PS:@mixin
通过@include
调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用@mixin
,而非传递参数类的使用下面的继承%
。
7:继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend
,后面紧跟需要继承的选择器。
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
==》
h1,.speaker {border: 4px solid #ff9aa9; }
.speaker{border-width: 2px; }
占位选择器%
从sass 3.2.0以后就可以定义占位选择器%
。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend
去继承相应的样式,都会解析出来所有的样式。占位选择器以%
标识定义,通过@extend
调用。
%ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; }
%clearfix{
@if $lte7 {*zoom: 1; }
&:before,
&:after {content: ""; display: table; font: 0/0 a; }
&:after {clear: both; }
}
#header{
h1{
@extend %ir; width:300px;
}
}
.ir{
@extend %ir;
}
==》
#header h1,
.ir{color: transparent; text-shadow: none; background-color: transparent; border: 0; }
#header h1{width:300px; }
如上代码,定义了两个占位选择器%ir
和%clearfix
,其中%clearfix
这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。
ps:在@media
中暂时不能@extend
@media
外的代码片段,以后将会可以。
8:函数
sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始。sass的官方函数链接为:sass fuction,
实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,
其调用方法为lighten($color,$amount)
和darken($color,$amount)
,
它们的第一个参数都是颜色值,第二个参数都是百分比。
定义变量:
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
定义函数:
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
使用:
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
结果:
body{ font-size:10px; color:#E6E6E6; }
.test{ font-size:1.6rem; color:#B3B3B3; }
关于@mixin
,%
,@function
更多说明可参阅:
9:运算
运算
sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。
$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;
//grid
$_columns: 12 !default; // Total number of columns
$_column-width: 60px !default; // Width of a single column
$_gutter: 20px !default; // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
10:条件判断及循环
@if
可一个条件单独使用,也可以和@else
结合多条件使用
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {color: blue; }
@else if $type == matador {color: red; }
@else if $type == monster {color: green; }
@else {color: black; }
}
编译后:
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {color: green; }
三目判断
语法为:if($condition, $if_true, $if_false) 。三个参数分别表示:条件,条件为真的值,条件为假的值。
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
for循环
for循环有两种形式,分别为:@for $var from <start> through <end>
和@for $var from <start> to <end>
。
$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
@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 $var in <list or map>
。其中$var
表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$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'); }
多个字段list数据循环
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
==》
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
多个字段map数据循环
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
==》
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
sass-基础的更多相关文章
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...
- sass基础编写流程
这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架 所以sass的运行依赖Ruby环境 所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- Sass基础语法
Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表.Sass引擎是基于Ruby的. 导入Sass文件: @import "colors" ...
- sass基础—具体编译步骤及对应命令:详细
/*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin al ...
- Sass 基础教程
0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分 ...
- Sass 基础(七)
Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来 ...
- sass基础用法
嵌套: 1.选择器嵌套: 2.属性嵌套; .box { border-top: 1px solid red; border-bottom: 1px solid green; } .bo ...
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
随机推荐
- CentOS下安装配置SVN服务器并自动同步到web目录
一.安装 yum install subversion测试是否安装成功 /usr/bin/svnserve --version如提示以下内容,说明已安装成功 svnserve,版本 1.6.11 (r ...
- loj #6261 一个人的高三楼 FFT + 组合数递推
\(\color{#0066ff}{ 题目描述 }\) 一天的学习快要结束了,高三楼在晚自习的时候恢复了宁静. 不过,\(HSD\) 桑还有一些作业没有完成,他需要在这个晚自习写完.比如这道数学题: ...
- 背包DP【洛谷P2113】 看球泡妹子
P2113 看球泡妹子 题目背景 2014年巴西世界杯开幕了,现在满城皆是世界杯,商家们利用它大赚一笔,小明和小红也借此机会增进感情. 题目描述 本届世界杯共有N支球队,M场比赛.男球迷小明喜欢看比赛 ...
- opencv第二课,使用cmake编译OpenCV,并添加opencv_contrib模块
一.下载安装cmake 想要在Windows平台下生成OpenCV的解决方案,我们需要一个名为cmake的开源软件,可以在camke的官网:http://www.cmake.org/上下载到 或者点击 ...
- [HAOI2006]受欢迎的牛 tarjan缩点 BZOJ1051
题目背景 本题测试数据已修复. 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 ...
- mysql的时区错误问题
JDBC连接数据库报错如下: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or r ...
- python3 repr()函数笔记
a=[1,2,3,4]print(repr(a))print(type(repr(a)))for i in repr(a): print(i)#repr函数是将对象转换成string类型
- Jenkins安全配置详解
一.进入安全配置界面 首页后点击进入系统管理(Manage Jenkins) ——下拉下方看到安全配置(Configure Global Security) ——进入安全配置界面 二,详解安全配置的选 ...
- my25_Mysql操作技巧汇总
1. drop database 在数据量很大的情况下,最好先对表进行truncate,然后再drop database:不然会卡住很长的时间. 2. 数据的逻辑导入导出 如果数据量大,又需要进行逻辑 ...
- ETL的两种架构(ETL架构和ELT架构)
ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词 ...