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保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
随机推荐
- SpringBoot dubbo之class is not visible from class loader
使用了两个类加载器加载了同一个类,区分一个Class对象是否相等要看包名+类名,也要看是否是同一个类加载器 方案一,排查掉spring-boot-devtools模块的maven引入可以解决,这时候所 ...
- CGContext ----生成图片--image
//获取图片 + (UIImage*) getImageWithColor:(UIColor*)color andHeight:(CGFloat)height { CGRect r= CGRectMa ...
- git 日常使用从入门到真香
目录 git 日常使用从入门到真香 一.Git简介 二.Git常用命令 三.git操作流程 四.报错处理 git 日常使用从入门到真香 一.Git简介 Git是一个开源的分布式版本控制系统,可以有效. ...
- 查看php 相关信息
PHP系统常量 __FILE__ 当前PHP程序脚本的绝对路径及文件名称 __LINE__ 存储该常量所在的行号 __FUNCTION__ 存储该常量所在的函数名称 __CLASS__ 存储该常量所在 ...
- Nginx根据目录自动生成二级域名
前言: 每次创建二级域名如果都修改一次配置文件的话,项目多了会带来很多不必要的工作量,如果能够在一个web目录下创建一个文件夹并且自动生成文件目录的话,那真是极好的,本文就基于Nginx贴出这 ...
- PS常用快捷键大全
察看图像类别 说明:: --- Shift键 : --- 空格键 *--- 在Imageready中不适用 § --- 只在Imageready中可用 动作 结果 双击工具箱::或Ct ...
- POI 读大文件日志
POI的三个目录 usermodel 包含很多类,方便用户使用,但是占用内存大 eventusermodel 使用xml的SAX事件解析,XSSFReader创建时必须使用OPCPackage,pkg ...
- vue混入(mixins)
混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项. 当组件使用混入对象时,所以混入对象的选项将被混入该组件本身选项,当组件和混入对象含有同名选项时,这 ...
- 时间戳date 命令
时间戳date 命令 [chenxiaohao@iZbp1c0q444r0hp2gq8lhmZ server]$ echo $(date +%Y%m%d) ——————>今天 2018032 ...
- perf命令
@(Linux基础)[perf命令] perf命令 ---- 简介 Perf是内置于Linux内核源码树中的性能剖析(profiling)工具,它基于事件采样原理,以性能事件为基础,支持针对处理器相关 ...