搜尋
首頁web前端html教學Sass入门教程_html/css_WEB-ITnose

CSS 令人不爽

写 css 很麻烦,又不好维护,总之令人不爽。


CSS 预处理器

于是就为 css 加入编程元素,这就是“css预处理器”。


Sass vs Less

最广为人知的 css 预处理器是 Sass 和 Less。众多 css 预处理器中谁最优秀,最简短的回答:Sass。


Sass 简介

Sass 是由 Ruby 写的,但与 Ruby 的语法没有一丁点关系,所以学 Sass 不用学 Ruby,只是需要安装 Ruby 而已。

Sass 是 CSS3 的扩展,是 CSS3 的超集。 


安装 Ruby

已说过,Sass 是由 Ruby 编写的,所以先安装 Ruby,不同操作系统安装方法不同,Ruby 官网下载地址:  https://www.ruby-lang.org/en/documentation/installation/。

检测 Ruby 是否安装成功:

ruby -v

或者

ruby --version

 
安装Sass

输入如下命令:

gem install sass

检测是否安装成功:

sass -v

sass --version

升级 Sass 版本:

gem update sass

 
Sass 语法

两种语法格式

一种是以 .sass 作为扩展名,这种语法对空格敏感,不用花括号,不用分号:

#div    width: 100px    height: 200px

另一种是以 .scss 作为扩展名,又出现了熟悉的花括号和分号:

#div {    width: 100px;    height: 200px;    }

选择哪一种语法?当然是后者。


 

编译风格

共有四种编译风格:

(1)nested:嵌套缩进的css代码,它是默认值。
(2)expanded:没有缩进的、扩展的css代码。
(3)compact:简洁格式的css代码。
(4)compressed:压缩后的css代码。
 

sass 001.scss 001.css --style compressed

sass --style compressed 001.scss 001.css

如果只是使用:

sass 001.scss

则会将编译后的 .css 输出显示在命令行。

 

变量

变量名以 $ 符号开头,可包含所有可用作 CSS 类名的字符,包括下划线和中划线。

$width: 100px;#div {    width: $width;    height: 200px;    }

   

$width: 2px;#div {    border : $width solid red;}

如果变量需要嵌在字符串中,则变量需要放在 #{} 中:

$dir: top;#div {    border-#{$dir} : 2px solid red;}

   

如果变量定义在 CSS 规则块之内,则只在此规则块之内有效。

变量名中不区分的中划线和下划线,即 $link_color 与 $link-color 相同:

$link-color: red;#div {    color: $link_color;}

   
   

嵌套

选择器嵌套:

#div {    h1 {        color: red;    }    article {        p {            color: green        }    }}

编译后:

#div h1 {  color: red; }#div article p {  color: green; }

父选择器标识符 & :

a {    color: red;    &:hover {        color: green;    }}

编译后:

a {  color: red; }  a:hover {    color: green; }

     

a {    color: red;    p & {        color: green;    }}

编译后:

a {  color: red; }  p a {    color: green; }

群组选择器的嵌套:

aritcle {    h1, h2, h3, h4 {color: #ccc}}

编译后:

aritcle h1, aritcle h2, aritcle h3, aritcle h4 {  color: #ccc; }

     

aritcle, aside {    h1, h2 {color: #ccc}}

编译后:

aritcle h1, aritcle h2, aside h1, aside h2 {  color: #ccc; }

组合选择器:> + ~,无需使用父选择器标识符 & ;可以用在外层选择器的后边,也可以用在里层选择器的前边:

aritcle {    > section {color: red}    + section {color: green}    ~ section {color: blue}    dl > {        dt {color: #ccc}        dd {color: #666}    }}

编译后:

aritcle > section {  color: red; }aritcle + section {  color: green; }aritcle ~ section {  color: blue; }aritcle dl > dt {  color: #ccc; }aritcle dl > dd {  color: #666; }

属性也可以嵌套,嵌套规则是:用 ":" 把属性名从中划线 "-" 的地方断开,在根属性后边添加一个冒号,紧跟一个 "{}" 块,把子属性部分写在 "{}"块中:

nav {    margin: {        top: 10px;        left: 5px;    }}

编译后:

nav {  margin-top: 10px;  margin-left: 5px; }

     

nav {    margin: 15px {        top: 10px;        left: 5px;    }}

编译后:

nav {  margin: 15px;    margin-top: 10px;    margin-left: 5px; }

     
     

@import

Sass 重写了 @import。原生的 CSS 执行到 @import 时才会去下载其导入的 CSS 文件。Sass 的 @import 在生成 CSS 文件时就把相关文件导入进来。

使用 Sass 的 @import 不需要指定导入文件的扩展名,即可以省略 .scss 或 .sass。

Sass 允许 @import 写在 CSS 规则内。

Sass 有一个文件命名约定,对于不需要生成对应的独立 CSS 文件,只作为 @import 编写的 Sass 文件,被称为局部文件,局部文件名以下划线开头,导入局部文件时,可以省略该下划线。

以下三种情况会使用 CSS 原生 @import:

(1)被导入的文件名以 .css 结尾;

(2)被导入的文件名是一个 URL 地址,如 http://www.xxx.com/style/xxx.css;

(3)被导入的文件名是 CSS 的 url() 值。

!default

!default 用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值:

$width: 10px;$width: 20px !default;$height: 10px;$height: 20px;#div {    width: $width;    height: $height;}

编译后:

#div {  width: 10px;  height: 20px; }

     
     

注释

CSS 标准格式的注释是: /* ... */。

Sass还有一个注释,叫静默注释:// 注释内容。这种注释不会出现在生成的 CSS 文件中。


     

混合器

变量是为了重用某个值,混合器则可以重用大段样式。

混合器使用 @mixin 标识符定义,使用 @include 引用这个混合器。

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;}#div {    color: red;    @include rounded-corners;}

编译后:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }

在混合器中也可以使用 CSS 规则:

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;    a {        color: red;    }    & span {        color: blue;    }}#div {    color: red;    @include rounded-corners;}

编译后:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }  #div a {    color: red; }  #div span {    color: blue; }

可以给混合器传参,参数可以有默认值:      
     

@mixin rounded-corners($size, $color, $color2: red) {       -moz-border-radiux: $size;    -webkit-border-radius: $size;            border-radiux: $size;    a {        color: $color;    }    & span {        color: $color2;    }}#div {    color: red;    @include rounded-corners(10px, green);}

编译后:

#div {  color: red;  -moz-border-radiux: 10px;  -webkit-border-radius: 10px;  border-radiux: 10px; }  #div a {    color: green; }  #div span {    color: red; }

     


     

选择器继承

选择器继承是指一个选择器可以继承另一个选择器定义的样式,继承使用 @extend 。

.error {    color: red;    font-size: 16px;}.syntax {    background-color: blue;    @extend .error;}

编译后:

.error, .syntax {  color: red;  font-size: 16px; }.syntax {  background-color: blue; }

     
     

表达式

只要能放在属性右边的都可以称为表达式,如一个简单的值 bold 或 5px,也可以是值的列表 2px solid #ccc。

表达式中不仅能包含变量,还可以包含数学运算符。


     

数据类型

CSS 属性或 Sass 变量中的每个值都有一个类型,类型不同,动作方式也不同,Sass 能理解所有的这些类型。


     

字符串

包括 无引号字符串 和 有引号字符串,bold、auto、center 属性于无引号字符串,"microsoft yahei" 属于有引号字符串。

字符串连接运算符是:"+"。如果两个字符串都是无引号字符串,则结果也是无引号字符串;如果两个字符串都是有引号字符串,则结果也是有引号字符串;如果一个是有引号字符串,一个是无引号字符串,则结果与是否有引号取决于左边的字符串。

div + p    divp"div" + p    "divp"div + "p"    divp

     
     

数值

数值包括两部分:实际的数值及单位。

当对带有单位的数值做乘法和除法运算时,单位也一起做乘法和除法运算,如:

5em*4px    20em*px16px/1em    16px/em

这有什么用呢?可以用在单位转换,如 16px/em 代表 1em 是 16px。

对带单位的数值做加法或减法运算时,Sass 会自动转换,否则如果不能转换则出错。      
还可以使用取模运算:%。

除法 “/” 有些特殊,因为 "/" 即可以表示除法,也可以表示一个普通斜杠,以下三个情况满足任何一个都会使用除法:

(1)在 / 的任意一边使用一个变量;

(2)整个值被小括号包围;

(2)该值被用作其他算术表达式的一部分。

$var: 1px; $var/2px;(1px/2px);1 + 1px/2px;

     
     

颜色

不论最初的颜色值以何种形式表示,Sass 内部会同时使用 RGB 和 HSL 来表示颜色。


     

列表

列表是一个数值的序列,用来表示 border、font等属性,如 2px solid #ccc,也可以是以逗号隔开。

算术运算符对列表没什么用。

布尔值

布尔值只有两种:true 和 false。

布尔值不使用算术运算符,它们有自己的操作符:and、or 和 not。

返回布尔值的操作符:

>===

对于小于和大于,只用于数字;对于 == 则可以用于全部类型。      
     
     

函数

和 CSS 函数不同,Sass 函数可以使用关键字变量,这意味着不是通过参数顺序来指明参数,而是可以显示地命名几个或者所有的变量:

rgb($green: 127, $blue: 127, $red: 255)


数值函数

(1)abs($number)    取$number的绝对值;

(2)ceil($number)    $number向上取整;

(3)floor(($number)    $number向下取整;

(4)round($number)    $number四舍五入;

(5)percentage($number)    将小数$number转换为百分数;

(6)comparable($number1, $number2)    $number1和$number2是否能比较;

(7)unit($number)    返回$number的单位;

(8)unitless($number)    返回$number是否没单位。


     

颜色函数

(1)alpha($color)/opacity($color)    返回$color的alpha通道;
(2)blue($color)    返回$color的蓝色通道;
(3)green($color)    返回$color的绿色通道;
(4)red($color)    返回$color的红色通道;
(5)hue($color)    返回$color的色度属性;
(6)lightness($color)    返回$color的亮度属性;
(7)saturation($color)    返回$color的饱和度属性;
(8)complement($color)    返回$color色环与与$color的互补;
(9)grayscale($color)    返回$color的灰度版本;
(10)invert($color)    返回$color的反相版本;
(11)mix($color1, $color2, [$weight])    按照$weight的百分比将$color1和$color2混合在一起;
(12)$adjust($color, ...)    按照给定的的颜色成分调整$color的各个属性;
(13)$scale($color, ...)    按照百分比调整$color的各个属性;
(14)$set($color, ...)    将$color的各个属性设置为固定值。
     


     

列表函数

(1)nth(a b c, $n)    返回列表第$n个值;
(2)join($list1, $list2, [$separator])    将两个列表连接起来,如果没有$separator,则分隔符以第一个为准;
(3)length($list)    返回$list列表中项目的个数。
     


     

其他函数

(1)type-of($value)    返回一个无符号字符串,代表$value的类型,可以是:number、string、color、bool、list;
(2)if($condition, $if-true, $if-false)    就像三元运算符,如果$condition为true,则返回$if-true,否则返回$if-false。


     

自定义函数

使用 @function 指令自定义函数,每个 @function 必须返回一个结果。

@function width($w) {    @return $w * 100px;}

     


     

控制指令

@for

@for 指令用来计数,有两种语法:

(1)@for $i from to

(2)@for $i from through

@for $i from 1 to 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后:

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }


@for $i from 1 through 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后:

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }.box-5 {  width: 500px; }

可以看出这两种语法的差异在于要不要包括最后一个数字。

@each

@each 指令多次重复一个样式块。

@each $item in home, about, archive {    nav .#{$item} {        background-image: url(/images/#{$item}.png);    }}

编译后:

nav .home {  background-image: url(/images/home.png); }nav .about {  background-image: url(/images/about.png); }nav .archive {  background-image: url(/images/archive.png); }

@each 指令中的列表可以用逗号分开,也可以用空格分开。        
       
       

@if @else

@if 指令用来控制一个样式块是否使用,其中也可以与 @else if 及 @else指令配合使用。

$flag: 2;.nav {    @if $flag == 1 {        width: 100px;    } @else if $flag == 2 {        width: 200px;    } @else {        width: 300px;    }}

编译后:

.nav {  width: 200px; }

       

参考

(1)《Sass与Compass实战》

(2)  http://www.ruanyifeng.com/blog/2012/06/sass.html





陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)