用sass选择器嵌套的时候,如何表示直接子元素

html-css016

用sass选择器嵌套的时候,如何表示直接子元素,第1张

使用CSS的子元素选择器与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

选择子元素如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果希望选择只作为h1元素子元素的 strong 元素,可以这样写:

h1 >strong {color:red}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个h1中的 strong 不受影响:

<h1>This is <strong>very</strong><strong>very</strong>important.</h1>

<h1>This is <em>really <strong>very</strong></em>important.</h1>

扩展资料:

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。

SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。

Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

参考资料来源:百度百科-SASs

SASS平台是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS是Ruby语言写的,但是两者的语法没有关系,里面可以直接使用CSS语法,文件后缀名是.scss。

CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

以上内容参考  百度百科-CSS

本文前提 是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;

本文使用的webstorm为11.0版本

点击左上角的 *File→Settings→File Watchers ***

在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss

然后按照下图进行操作:

其中黄色的地方都要填好,program那里是你安装ruby中响应的scss.bat的路径,如果安装ruby时,你不是按照默认c盘路径按装的话,那么那里是需要需改的;

按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的

1、Arguments:

可以配置编译后的文件的输出路径,我这里写的是:

--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css

注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.

举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.

如图所示:

2、 Output paths to refresh:

改成这样: .css: .css.map

经过以上配置就实现了, webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.

这里需要注意两点:

1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.

2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.

原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561