Sass基础语法_html/css_WEB-ITnose
程序员文章站
2024-01-23 23:28:28
...
Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表。Sass引擎是基于Ruby的。
导入Sass文件:
@import "colors" //colors.scss
注释:
//这种注释不会出现在生成的css文件中/*这种注释内容会出现在css文件中,当当出现在原生CSS不允许的未知,则这些注释会被抹掉*/
变量>>
-->变量声明
//注意:变量中下划线和中划线表示同一个变量
$flower-color:#abcdef; //flower-color是一个变量,其值现在是#abcdef$basic-border:1px solid black; //任何可以用作CSS属性值的赋值都可以作为SASS的变量值$basic-font:"MyriadPro"、Myriad、"helveticaNuue"、Helvetica;//也可以是逗号分割的多个属性值//与CSS属性不同,变量可以在CSS会泽块定义之外使用。当变量定义在CSS规则块内,那么该变量只能在其子级规则块内使用。
$nav-color:#dadada;nav{ $width:100px; width:$width; color:$nav-color;}
-->变量引用
凡是CSS属性的标准值可以存在的地方,变量就可以实用。
$flower-color:red; //变量声明.flower{ //变量引用 border:1px $flower-color solid;}
嵌套规则>>
-->基本嵌套规则,和一些编程语言很类似很容易理解,群则选择器的嵌套也和CSS语法一样
//CSS 代码,经常重复写选择器#content article h1{color:#333}#contetn article p{margin-bottom:1.5em;}#cojntent aside{background-color:#eee;}//SASS代码,选择器嵌套#content{ article{ h1{color:#333} p{margin-bottom:1.5em} } aside{background-color:#eee;}}
-->父选择器的标识符&
article a{ color:blue; &:hover{color:red} //必须标识父选择器&,否则SASS无法正常工作}//CSS 代码article a{color:blue}article a:hover{color:red}
-->子组合选择器和同层组合选择器:> + ~
这些选择器必须配合其他选择器实用,以制定浏览器仅选择某种特定上下文中的元素。这些选择器可以应用带Sass的规则嵌套中。
article section{margin:5px;}//用子组合选择器>选择一个元素的直接子元素article>section{border:1px red solid}
//同层相邻组合选择器+选择元素紧跟着的元素header + p {font-size:1.1em}
//同层全体组合选择齐齐~,选择跟在元素后的同层元素,不管他们之间间隔了多少其他元素article ~ article {border:1px solid red;}
-->嵌套属性
除了选择器,属性也可以进行嵌套。
nav{ border:1px solid #ccc{ left:0px; right:0px; }}
虽然属性和选择器嵌套可以大大减少便血量,但当样式表越来越大,这种写法很难保持结构清晰。而处理大量样式的唯一方法就是分拆成多个文件。
混合器>>
@mixin corners{ //用@mixin标识符定义 -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px;; -o-border-radius:5px; border-radius:5px;}.calamus{ border:2px solid red; @include corners; //用@include调用混合器中的所有样式}//混合器中不仅可以包含css规则还可以包含属性,也可以嵌套//混合器可以传递参数@maxin link-colors($normal,$hover){ color:$normal; &:hover{color:$hover}}a{ @include link-colors(blue,red); //参数的传递}
继承>>
通过 @extend实现
.error{ border:1px solid red; color:red;}.seriousError{ @extend .error; //继承error的属性值 width:300px;}
上一篇: 求课程
下一篇: 利用递归把多维数组转为一维数组的函数
推荐阅读
-
Sass基础语法_html/css_WEB-ITnose
-
基础页面布局之div+css_html/css_WEB-ITnose
-
css基础组件库(兼容低版本)_html/css_WEB-ITnose
-
Sass注释: /* */ 和 //_html/css_WEB-ITnose
-
ruby中输入命令行编译sass(ruby小白)_html/css_WEB-ITnose
-
在webstorm下使用compass 和 sass_html/css_WEB-ITnose
-
Sass对CSS的扩展-嵌套规则,引用父选择器,属性嵌套,占位符选择器_html/css_WEB-ITnose
-
html综述一 jQuery基础使用(动态在body中创建div节点)_html/css_WEB-ITnose
-
Sass对CSS的扩展-嵌套规则,引用父选择器,属性嵌套,占位符选择器_html/css_WEB-ITnose
-
html基础 中_html/css_WEB-ITnose