Sass 增强语法的样式表

时间:2022-12-10 17:31:07
功能:
  • 完全兼容CSS3
  • 相对CSS,扩展了变量、嵌套和mixins
  • 对控制颜色和其他值的非常有用的方法
  • 高级功能,如库的直接控制
  • 良好的格式,自定义输出
语法
对于Sass,有两种语法。
一种叫SCSS(Sassy CSS),它是CSS语法的扩展,也就是说,每个有效的CSS3样式对于一个有效的SCSS。并且SCSS理解更多的CSS技巧和厂商特性,里如果IE8的filter语法。
第二种是旧些的语法,叫SASS。提供一种写CSS的便捷方式。
前者的文件后缀名是.scss,后者是.sass。
使用Convert命令可以相互转换:
sass-convert style.sass style.scss
反之亦然

使用方法

1. 安装

$gem install sass

2. 转换

sass input.scss  output.css

3. 监控

$sass --watch input.scss:output.css

目录:

$sass --watch app/sass:public/stylesheets

CSS扩展

1. 嵌套规则

  Sass允许CSS嵌套到另外一个CSS中。例如:

#main p {
color: #00ff00;
width: 97%; .redbox {
background-color: #ff0000;
color: #000000;
}
}

  编译后:  

#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}

2.引用父选择器:&

  在嵌套使用中,有时候需要引用父元素:  

a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}

  编译后:  

a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}

3.嵌套属性

  在同一个命名空间下,CSS有时候会有多个属性,例如font-family,font-size和font-weight都在font命令空间下。使用嵌套,将减少输入。Sass提供冒号(:)来支持这个方法。例如:  

.funky {
font: {
family: fantasy;
size: 30e m;
weight: bold;
}
}

  编译后:

.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}

  也是可以带值的

.funky {
font: 20px/24px fantasy {
weight: bold;
}
}

  编译后:

.funky {
font: 20px/24px fantasy;
font-weight: bold;
}

注释

  方法:/*  */或者//

@规则

1. @import

  导入SCSS和Sass文件。所有导入的文件都会被合并成一个单独的CSS文件。另外,变量和mixins都可以在主文件中引用。

  在一次import中,可以导入多个文件,之间使用逗号隔开。例如:  

@import "rounded-corners", "text-shadow"

  可以引入变量:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

  编译后:  

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Sass 增强语法的样式表的更多相关文章

  1. sass笔记-3|Sass基础语法之样式复用和保持简洁

    上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...

  2. WEB入门三	CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  3. 【Qt开发】QT样式表单 qss的样式优化

    QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...

  4. 0811 css样式表基本

    CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...

  5. QT样式表

    QT样式表 一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...

  6. 1+X证书学习日志 —— css样式表

    ## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法   选择符{属性:属性值;} ##             所有的css代码 都要放在css样式表里面    ...

  7. vue2.0 样式表引入的方法 css sass less

    在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值 ...

  8. Qt 之 QSS(样式表语法)

    https://blog.csdn.net/liang19890820/article/details/51691212 简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉 ...

  9. Qt之QSS(样式表语法)

    http://blog.csdn.net/liang19890820/article/details/51691212 版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者: ...

随机推荐

  1. Permutation

    (M) Permutations (M) Permutations II (M) Permutation Sequence (M) Palindrome Permutation II

  2. zip ubuntu使用

    http://www.cnblogs.com/daizhuacai/p/3174885.html 安装: sudo apt-get install zip 解压: unzip -d path file ...

  3. C 语言字符串连接的 3种方式

    C 语言字符串连接的 3种方式 #include<stdio.h> #include<stdlib.h> #include<string.h> char *join ...

  4. tomcat报404

    很久没有用eclipse了,尝试了使用下,竟然将简单的配置tomcat都忘了. 自己新建一个工程,在tomcat发布以后,报404,经查Serves下的web.xml中,欢迎页面是index.jsp, ...

  5. &period;net通用权限框架B&sol;S &lpar;五&rpar;--WEB&lpar;3&rpar;组织机构

    .net通用权限框架B/S 首先我们看导航菜单中,对组织机构的设置 我们设置了组织机构名称,链接(对应的mvc控制器名/orga),图标是个小钥匙,菜单的操作权限设置的是"添加,编辑,删除& ...

  6. &lbrack;BZOJ&rsqb;1019 汉诺塔&lpar;SHOI2008&rpar;

    找规律成功次数++. Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...

  7. 金融量化分析【day111】:Matplotib简介

    一.Matplotib-绘图和可视化简介 Matplotib是一个强大的Python绘图和数据可视化的工具包 1.安装方法 pip install matplotlib 2.引用方法 import m ...

  8. &lt&semi;构建之法&gt&semi;13-17

    13章软件测试. 从基本名词到软件测试的分类方法,啃完这15页书,至少对与软件测试的理解程度不是停留在以前的层次(让用户使用,然后提出碰到什么问题) 测试不是那么简单就阐述的完全.测试按测试目的分类可 ...

  9. Tomcat添加管理员role

       最近朋友问我怎么在Tomcat里面使用 admin 登录,一般情况下登录后是提示xxx的,经过百度后,好不容易才找到答案:    原来添加一个role为admin:<role rolena ...

  10. quartz---触发job时间和结束时间

    quartz:Trigger:触发job时间和结束时间 package com.imooc.demo.helloQuartz; import java.text.SimpleDateFormat; i ...