search
HomeWeb Front-endHTML TutorialSass变量、嵌套_html/css_WEB-ITnose

声明变量
定义变量的语法
Sass 的变量包括三个部分:
  声明变量的符号“$”
  变量名称
  赋予变量的值
简单的示例,假设你的按钮颜色可以给其声明几个变量:

1 $brand-primary : darken(#428bca, 6.5%) !default;/* #337ab7*/2 $btn-primary-color : #fff !default;3 $btn-primary-bg : $brand-primary !default;4 $btn-primary-border : darken($btn-primary-bg, 5%) !default;5 /*如果值后面加上!default则表示默认值。*/

 

 

普通变量与默认变量
普通变量
定义之后可以在全局范围内使用

1 $fontSize: 12px;2 body{3  font-size:$fontSize;4 }

编译后的CSS代码:

1 body{2  font-size:12px;3 }

默认变量
sass的默认变量仅需要在值的后面加上!default即可。

1 $baseLineHeight:1.5 !default;2 body{3  line-height: $baseLineHeight;4 }

编译后的css代码:

1 body{2  line-height:1.5;3 }

sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

1 $baseLineHeight: 2;2 $baseLineHeight: 1.5 !default;3 body{4  line-height: $baseLineHeight; 5 }

编译后的css代码:

1 body{2  line-height:2;3 }

可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

 

 

局部变量和全局变量
如果已经存在同名的全局变量,从 3.4 版本开始,Sass 已经可以正确处理作用域的概念,并通过创建一个新的局部变量来代替。
全局变量与局部变量

 1 /*SCSS*/ 2 $color: orange !default;/*定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)*/ 3 .block { 4  color: $color;//调用全局变量 5 } 6 em { 7  $color: red;//定义局部变量 8  a { 9  color: $color;//调用局部变量10     }11 }12 span {13  color: $color;//调用全局变量14 }

css 的结果:

 1 /*CSS*/ 2 .block { 3  color: orange; 4 } 5 em a { 6  color: red; 7 } 8 span { 9  color: orange;10 }

在元素内部定义的变量不会影响其他元素。如此可以简单的理解成,全局变量就是定义在元素外面的变量,如下代码:

$color:orange !default;

 $color  就是一个全局变量,而定义在元素内部的变量,比如  $color:red;  是一个局部变量。
全局变量的影子
当在局部范围(选择器内、函数内、混合宏内...)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的影子。基本上,局部变量只会在局部范围内覆盖全局变量。
上面例子中的 em 选择器内的变量 $color  就是一个全局变量的影子。

 1 /*SCSS*/ 2 $color: orange !default;//定义全局变量 3 .block { 4  color: $color;//调用全局变量 5 } 6 em { 7  $color: red;//定义局部变量(全局变量 $color 的影子) 8  a { 9  color: $color;//调用局部变量10     }11 }

什么时候声明变量?
建议:创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量,这丝毫没有作用。只有满足所有下述标准时方可创建新变量:
  1、该值至少重复出现了两次;
  2、该值至少可能会被更新一次;
  3、该值所有的表现都与变量有关(非巧合)。
  4、基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。

 

 

嵌套-选择器嵌套
Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深
Sass 的嵌套分为三种:
  选择器嵌套
  属性嵌套
  伪类嵌套
1、选择器嵌套
假设我们有一段这样的结构:

1 <header>2     <nav>3         <a href=“##”>Home</a>4         <a href=“##”>About</a>5         <a href=“##”>Blog</a>6     </nav>7 <header>

想选中 header 中的 a 标签,在写 CSS 会这样写:

1 nav a {2  color:red;3 }4 header nav a {5  color:green;6 }

那么在 Sass 中,就可以使用选择器的嵌套来实现:

1 nav {2  a {3  color: red;4 5  header & {6  color:green;7         }8  } 9 }

 

 

 

嵌套-属性嵌套
Sass中还提供属性嵌套,CSS有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有margin、padding、font等属性。
例:

1 .box{2  border-top: 1px solid red;3  border-bottom: 1px solid green;4 }

在Sass中可以这样写:

1 .box{2  border:{3  top: 1px solid red;4  bottom: 1px solid green;5     }6 }

 

 

 

嵌套-伪类嵌套
伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用。
就拿经典的“clearfix”为例吧:

 1 .clearfix{ 2  &:before,&:after { 3  content:""; 4  display: table; 5     } 6  &:after { 7  clear:both; 8  overflow: hidden; 9     }10 }

编译出来的 CSS:

1 clearfix:before, .clearfix:after {2  content: "";3  display: table;4 }5 .clearfix:after {6  clear: both;7  overflow: hidden;8 }

避免选择器嵌套:
选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。
为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。

 

Statement
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
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

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 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 to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

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 <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

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 <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

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 <time> 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 <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

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

See all articles

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)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment