Home Web Front-end HTML Tutorial Sass基础语法_html/css_WEB-ITnose

Sass基础语法_html/css_WEB-ITnose

Jun 24, 2016 am 11:18 AM

Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表。Sass引擎是基于Ruby的。

导入Sass文件:

@import "colors" //colors.scss
Copy after login

注释:

//这种注释不会出现在生成的css文件中/*这种注释内容会出现在css文件中,当当出现在原生CSS不允许的未知,则这些注释会被抹掉*/
Copy after login

变量>>

-->变量声明 

//注意:变量中下划线和中划线表示同一个变量<br />$flower-color:#abcdef;      //flower-color是一个变量,其值现在是#abcdef$basic-border:1px solid black;    //任何可以用作CSS属性值的赋值都可以作为SASS的变量值$basic-font:"MyriadPro"、Myriad、"helveticaNuue"、Helvetica;//也可以是逗号分割的多个属性值//与CSS属性不同,变量可以在CSS会泽块定义之外使用。当变量定义在CSS规则块内,那么该变量只能在其子级规则块内使用。<br />$nav-color:#dadada;nav{    $width:100px;    width:$width;    color:$nav-color;}
Copy after login

-->变量引用

凡是CSS属性的标准值可以存在的地方,变量就可以实用。

$flower-color:red; //变量声明.flower{ //变量引用      border:1px $flower-color solid;}
Copy after login

嵌套规则>>

-->基本嵌套规则,和一些编程语言很类似很容易理解,群则选择器的嵌套也和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;}}
Copy after login

-->父选择器的标识符&

article a{    color:blue;    &:hover{color:red}    //必须标识父选择器&,否则SASS无法正常工作}//CSS 代码article a{color:blue}article a:hover{color:red}
Copy after login

-->子组合选择器和同层组合选择器:> + ~

这些选择器必须配合其他选择器实用,以制定浏览器仅选择某种特定上下文中的元素。这些选择器可以应用带Sass的规则嵌套中。

article section{margin:5px;}//用子组合选择器>选择一个元素的直接子元素article>section{border:1px red solid}
Copy after login

//同层相邻组合选择器+选择元素紧跟着的元素header + p {font-size:1.1em}
Copy after login

//同层全体组合选择齐齐~,选择跟在元素后的同层元素,不管他们之间间隔了多少其他元素article ~ article {border:1px solid red;}
Copy after login

-->嵌套属性

除了选择器,属性也可以进行嵌套。

nav{    border:1px solid #ccc{        left:0px;        right:0px;    }}
Copy after login

虽然属性和选择器嵌套可以大大减少便血量,但当样式表越来越大,这种写法很难保持结构清晰。而处理大量样式的唯一方法就是分拆成多个文件。

混合器>>

@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);  //参数的传递}
Copy after login

继承>>

通过 @extend实现

.error{    border:1px solid red;    color:red;}.seriousError{    @extend .error;      //继承error的属性值   width:300px;}
Copy after login

 

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles