SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
SASS 官网介绍:
sass is the most mature(成熟的),stable(稳定的),and powerful professional grade CSS extension language in the world.
官方文档:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
初学sass 遇到的最大阻碍可能是:需要搭建Ruby的运行环境和需要用命令行,其实这都非常简单。
一、安装1、安装Ruby
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
安装SASS请参考SASS官方网站: http://sass-lang.com/install,windows下安装ruby:rubyinstaller.org。
安装时注意一点:勾选Add Ruby executables to your PATH,添加Ruby可执行路径到环境变量再安装。
安装成功Dos窗口输入ruby -v会出现版本信息。
2、安装sass
假定你已经安装好了Ruby,接着在命令行输入下面的命令:gem install sass
安装成功输入sass -v可以看到版本信息。
二、使用
1、编译
Note:注意sass的文件名后缀是scss而不是sass。
将style.scss编译成css
sass style.scss
将style.scss编译后保存成css文件
sass style.scss style.css
将style.scss编译后保存成压缩过的css文件
sass <strong>--style compressed</strong> style.scss style.css
--style控制编译风格,可选参数如下
sass监听文件或目录,源文件有变动,自动编译。
// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss
2、语法
2.1、注释
和less一样,sass有两张注释
// 单行注释,不会作为最终输出/* 多行注释,以原生CSS的/*注释....*/形式作为最终输出 */
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*! 重要注释!*/
2.2、变量
一般会把颜色,字体,将来会重用的css值存为变量,方便统一修改和维护。
//定义变量$primary-color:#333;//变量调用body{ color:$primary-color;}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;.rounded{ border-#{$side}-radius:5px;}
2.3、嵌套
像html标签嵌套一样进行选择器嵌套写css,但是在生成css时有利有弊。
以下经典用法。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}
会生成:
nav ul { margin: 0; padding: 0; list-style: none; }nav li { display: inline-block; }nav a { display: block; padding: 6px 12px; text-decoration: none; }
属性也可以嵌套,比如border-color属性如下,border后面必须加冒号。
p{ border:{ color:red; }}
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a{ &:hover{color:red;}}
2.4、Less css片段和引入
目的:方便模块化和管理,小模块可维护性好。最终编译成一个css文件,这点比纯css的@import好。
弊端:多一个@import就多一个http请求。
片段命名:_partial.scss,引入用@import。
Demo:将_reset.scss import到base.scss。
_reset.scss如下
// _reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}
base.scss如下
// base.scss@import 'reset';<br />body { font: 100% Helvetica, sans-serif; background-color: #efefef;}
@import 'reset'即可。
2.5、mixin 重用代码块
在sass中可用定义重用的代码块,且可传参数,方便日后根据需求调用。
定义:通过@minxin name即可定义一个重复利用的样式。
调用:@include name
demo:
// mixin@mixin box($H:30px,$col:red){ height:$H; background-color:$col;}div.box{ @include box; //使用默认值}div.box1{ @include box(50px,blue); //传参}
编译结果:
div.box { height: 30px; background-color: red; }div.box1 { height: 50px; background-color: blue; }
css中有一些浏览器兼容性的代码,一些css3私有前缀等,此时使用mixins非常便捷,一个经典例子border-radius如下。
@mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box{@include border-radius(10px);}
2.6、继承
继承让一个选择器的样式被另一个选择器复用和覆盖。是一个DRY的语法,也最sass中有用的语法之一。
语法:@extend 选择器
demo:一系列提示信息。
.message{ border:1px solid #ccc; padding:10px; color:#333;}.success{ @extend .message; border-color:green;}.error{ @extend .message; border-color:red;}.warning{ @extend .message; border-color:yellow;}
编译后的css【继承实现了css组合声明】
.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; }.success { border-color: green; }.error { border-color: red; }.warning { border-color: yellow; }
2.7、运算符
包括+,-,*,、,%。
demo:计算aside和article的宽度。
.container{ width:100%;}article[role="main"]{ float:left; width:600px/960px*100%;}aside[role="complimentary"]{ float:right; width:300px/960px*100%;}
编译后css
.container { width: 100%; }article[role="main"] { float: left; width: 62.5%; }aside[role="complimentary"] { float: right; width: 31.25%; }
2.8、颜色
sass中集成了大量的颜色函数,让生成颜色更加简单
lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c
demo:
$linkColor: #08c;a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); }}
编译成css
a { text-decoration: none; color: #08c; }a:hover { color: #006699; }
3、高级语法
3.1、条件
if判断何种条件用何种样式。
p{ @if 1+1==2{border:1px solid red;} @if 5<2 {border:2px dotted red;}}
if,else配合使用。
demo:判断颜色中亮度大于30%,设置背景色为黑色,否则为白色。
$color : #1875e7;p{ @if lightness($color)>30%{ background-color:#000; }@else { background-color:#fff; }}
备注:lightness($color):从一个颜色中获取亮度(lightness)值;
3.2、 循环语句
for循环
@for $i from 1 to 10{ .border-#{$i}{ border:#{$i}px solid blue; }}
编译生成如下css
.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }
while循环
$i : 6;@while $i > 0{ .item-#{$i} {width:2em * $i;} $i : $i - 2;}
编译成css
.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }
each遍历
@each $member in a,b,c,d{ .#{$member}{ background-image:url("images/#{$member}.jpg"); }}
编译成css
.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }
3.3自定义函数
sass可自定义函数。
@function double($n){ @return $n * 2;}#sidebar{ width:double(5px);}
编译后css
#sidebar {width: 10px; }
资源链接:
http://sass-lang.com/guide
http://www.w3cplus.com/sassguide/
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6
Visual web development tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Mac version
God-level code editing software (SublimeText3)
