SCSS中文教程

难得的好教程，分享给大家，希望大家喜欢。
不过sas5并不想强迫任何人一定使用中划线或下划线,所以这两种用法相互兼容。用中划线声明的变量可以使 用下划线的方式引用,反之亦然。这意味着即使 compass选择用中划线的命名方式,这并不影响你在使用 compass 的样式中用下划线的命名方式进行引用 sLink-coLor: blue color: sLink coLor //编译后 color: blue 在上例中,$1ink- color和$ ink color其实指向的是同一个变量。实际上,在sass的大多数地方,中划线 命名的内容和下划线命名的内容是互通的,除了变量,也包括对混合器和Sass数的命名。但是在sass中纯css部 分不互通,比如类名、D或属性名。 尽管变量自身提供了很多有用的地方,但是sass基于变量提供的更为强大的工具才是我们关注的焦点。只有当变 量与sass的其他特性一起使用时,才能发挥其全部的潜能。接下来,我们将探讨其中一个非常重要的特性,即规则嵌 2.嵌套CSS规则; c55中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同 #content article h1 i color: #333 J #content article pi margin-bottom: 1. 4em #content aside[ background-color: #EEE 像这种情况,sass可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌 套规则块。sas5在输出css吋会帮你打这些套规则处理好,避免你的亘复书写 content article i h1 i color: #333] pi margin-bottom: 1. 4em H aside i background-color: #EEE J /*编译后+/ #content article h1 i color: #333 y #content article pi margin-bottom: 1. 4em j #content aside[ background-color: #EEE 上边的例子,会在输出css时把它转换成跟你之前看到的样的效果。这个过程中,sass用了两步,每一步都是 像打开俄罗斯套娃那样把芈边的嵌套規则块一个个打开。首先,把* content(父级)这个id放到 article诜择器 (子级)和 aside选择器(子级)的前边 #content h1 i color: #333] p[ margin-bottom: 1. 4em j #content aside i background-color: #EEE 3 编译后 # content article h1 i color: #333 1 *content article pi margin-bottom: 1. 4em 1 #content aside[ background-color: #EEE 然后,# content article里边还有嵌套的规则,sass重复一遍上边的步骤,把新的选择器添加到內嵌的选择 器前边。 一个给定的规则块,既可以像普通的CSS那样包含属性,又可以嵌套其他规则块。当你同时要为一个容器元素及其子 元素编写特定样式时,这种能力就非常有用了。 content i background-color: #f5f5f5; 咨器元素的样式规则会被单独抽离出来,而嵌套元紊的样式规则会像容器元素没有包含任何属性时那样被拍烹出来。 content background-color: #++5f5 H #content aside background-color: #eee 大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器里边立刻应用一个类似 于: hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构& 2-1.父选择器的标识符&; 一般情况下,sass在解开—个嵚套规则时就会把父选器(# content)通过一个空格连接到子选择器的前边 ( article和 aside)形成( ontent artic1e和# content aside)。这种在CSS里边被称为后代选择器 因为它选择D为 content的元素内所有命中选择器 article和 aside的元素。但左有些情况下你却不会希 望sass使用这神后代选择器的方式生成这神连接。 最常见的一种青是当你为链接之类的元素写: hover这种伪类时,你并不希望以后代诜择器的方式连接。比如 兑,下面这种情况sass就无法正常工作 article a i lor: blue hover[ color: red 这意味莙 color:red这条规则将会被应用到迒择器 article a: hover, article元素内链嶶的所有子元素 在被 hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实 解决之道为使用一个特殊的sass选怿器,即父选择醫。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提 供更好的控制。它就是一个简单的&符号,且可以放在任何一个选择器可岀现的地方,比如h1放在哪,它就可以放 在哪。 article a i color: blue i color: red y 当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换 article a i color: blue 1 article a: hover i color: red 在为父级选择器添加:hoνer等伪类时,这种方式非常有用。同时父选择器标识符还有另外一种用法,你可以在父 选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过3 javAscript在<boy>标签上添加一个ie的 类名,为这种情况编写特殊的样式如下 icontent aside color: red: body. ie color: green /*编译戶* icontent aside [ color: red; body.ie #content aside i color: green y sass在选择器嵌套上是非常智能的,即使是带有父选择器的情况。当sass選到群组选择器(由多个逗号分隔开 的选择器形成)也能完美地处理这种嵌套。 2-2.群组选择的嵌套; 在CSs里边,选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似, button button会 命中 button元素和类名为 button的元素。这种选择器称为群组选择器。群组选择器的规则会对金中群组中任何一个选 择器的元素生效 button, button t margin. 0j 当看到上边这段代码时,你可能还没意识到会有重复性的工作。但会很快发现:如果你需要在一个特定的容器元素内 对这样—个群组选择器进行修饰,情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器 元素的选择器。 container h1, container h2,. container h3( margin-bottom:. &em y 非常运,sass的嵌套特性在这种场景下也非常有用。当sas5解开一个群组选择器规则内的规则时,它会把 每—个内畝选择器的规则都正确地解出来 container i hI, h2, h3 imargin-bottom: Bem] 首先sass将. container和h1. container和h2. container和h3分别组合,然后将三者重新组合 成一个群组选择器,生成你前边看到的普通css样式。对于内嵌在群组选择器内的嵌套规则,处理方式也一样 nav, aside t a icolor: blue] 首先sass将nav和 a aside和a分别组合,然后将二者重新组合成一个群组生选择器 nav a, aside a icolor: blue 处理这种群组选择器规则嵌套上的强大能力,正是sas5在减少重复敲写方面的贡剌之一。尤其在当嵌套级别达到 两层甚至三层以上时,与普通的εss编写方式相比,只写一遍群组选择器大大减少了工作量。 有利必有弊,你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小,但实际生 成的css却可能非常大,这会降低网站的速度。 关于选择器嵌套的最后一个方面,我们看看sass如何处理组合选择器,比如>、+和~的使用。你将看到,这种场 環下你甚至无需使用父选择器标识符。 2-3.子组合选择器和同层组合选择器:>、+和 上边这三个组合选择必须和其他选择器配合使用,以指定浏览器仅选绎杲种特定上下文中的元素。 article section i margin: 5px J article sectioni border: 1px solid #ccc 你可以用子组合选择器>选择一个元素的直接子元素。上例中,第一个选择器会选择 article下的所有命中 section选择 器的元素。第二个选择器只会选择 article下紧跟着的子元素中命中 section选择器的元素 在下例中,你可以用同层邻组合洗择器+选择 header元素后紧龈的p元素 header pi font-size: 1. lem j 你也可以用同层全体组合选择器~,选择所有跟在 article后的同层 article元素,不管它们之间隔了多少其 他元素 article 这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或生层选择器前 article i border-top: 1px dashed #ccc y section background: #eee J d1> dt i color: #333 1 dd i color: #555 1 nav +&i margin-top: 0 I sass会如你所愿地将这些嵌套规则—一解开组合在一起 article w article border-top: 1px dashed #ccc article footer i background: #eee article dl dt i color: #333 article di > ddi color: #555 nav article i margin-top: 0] 在sass中,不仅仅css规则可以嵌套,对属性进行嵌套也可以少很多重复性的工作。 2-4.嵌套属性; 在sass中,除了CSs选择器,属性也可以进行嵌套。尽编写属性涉及的重复不像编写选择器那厶糟糕,但是要 反复写 border-sty1 e border- .dth border-colo以及 border-*等七是非常烦人的。在sass中,你只需 敲写一遍 border: nav width: 1px; color: #ccci 嵌套属性的规则是这样的:把属性名从中划线的地方断开,在根属性后边添加一个冒号:紧跟一个{}块,把子 属性部分写在这个【}块中。就像ss选泽器嵌套一样,sass会把你的孑属性—解开,把根属性和子属性部分 通过中划线连接起来,最后生成的效果与你手动一遍遍写的css样式一样 nav border-style: solid border-width: 1px 对于属性的缩亏形式,你甚至可以像下边这样来嵌套,指明例外规则 nav 这比下边这种同等样式的写法要好 border: 1px solid #ccci border-left: opx; 属性和选择器嵌套是非常仹大的特性,因为它们不仅大大減少了你的编弓量,而彐通过视觉上的缩进使你编写的样式 结构更加清晰,更易于阅读和开发。 即便如此,随着你的样式表变得越来越大,这种写法也很难倮持结构湑詬。有吋,处囯这种大量杄式的唯-方法就是 把它们分拆到多个文件中。sa55通过对css原有 import规则的改进直接支持了这一特性 3.导入SASS文件; Css有一个特别不常用的持性,即刨 import规则,它允许在一个cs文件中导入其他css文件。然而,后果 是只有抹行到@ import时,浏器才会去下载其他css文件,这导致页面加载起来特别慢。 sass也有一个@ Import规则,但不同的是,sass的@ import规则在生成css文件时就把相关文件导入进 来。这意味着所有相关的样式被归纳到了司一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中 定义的变量和混合器(参见25节)均可在导入文件中使用。 使用sas5的@ import规则并不需要指眀被导入文件的全名。你可以省略.sas5或·scs5文件后缀(见下 图)。这样,在不修改样式表的前提下,你完全可以随意修改你或别人写的被导入的sass样式文件语法,在sass 和sc55语法之间随意切换。举例来说,@ import" sidebar;这条命令将把 sidebar.scs5文件中所有样式添加到当 前样式表中。 colors. scss import"colors @ lmport“ mIxIns"; mixins. Scss lmport“grid” grid. scss 本节将介绍如何使用sass的imot来处理多个sass文件。首先,我们将学习编写那些被导入的 sass 件,因为在一个大型sass项目中,这样的文件是你最常编写的那一类。接着,了鮮集中导入sass文件的方法,使你 的样式可重用性更高,包括声明可自定义的变量值,以及在杲一个选择器范围内导入sa55文件。最后,介绍如何 在sass中使用css原生的@ import命令。 通常,有些sass文件用于导入,你并不希望为每个这样的文件单独地生成一个css文件。对此,sass用一个 特殊的约定来解决 3-1.使用SASS部分文件; 当通过@ import把sas5样式分散到多个文件时,你通常只想牛成少数几个css文件。那些专门为 import命 令而编写的sas5文件,并不需要生成对应的独立css文件,这样的sas5文件称为局部文件。对此,sass有一个 特殊的约定来命名这些文件。 此约定即,sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css 而只把这个文件用作导入。当你@ import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举 例来说,你想导入 themes/ night-sky.scss这个局部文件里的变量,你只需在样式表中写@ import themes/night-sky"j 局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时,这非常有用。在这种情况 下,有时需要在你的样式表中对导入的样式稍作修改,sass有一个功能刚好可以解决这个问题,即默认变量值 3-2.默认变量值; 一股情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明 sLink-coLor: blue; sLink-coLor: red; color: sLink-coLor 在上边的例子中,超链接的co1or会被设置为red。这可能并不是你想要的结果,假如你写了一个可被他人通 过@ lmport导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass 的! default标签可以实现这个目的。它很像css属性中! important标签的对立面,不同的是! default用于变 量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。 Sfancybox-width: 400px default 在上例中,如果用户在导入你的sass局部文件之前声明了一个$ fancybox- width变量,那么你的局部文件中 对$ ancybox-wdth赋值4ap×的操怍就无效。如果用户没有做这样的声明,则$ fancybox-wdth将默认 为40 接下来我们将学习嵌套导入,它允许只在某一个选择器的范围内导入sass局部文件。 3-3.嵌套导入; 跟原生的css不同,sass允许@ import命令写在css规则内。这种导入方式下,生成对应的css文件时 局部文件会被直接插入到css规则内导入它的地方。举例说明,有一个名为blue- there.scss的局部文件,内容如 下 background: blue lite; 然后把它导入到个CS5规则内,如下所示 blue-theme faimport "blue-theme"H /生成的结果跟你直接在.b1ue- theme选择器内写bue- theme.sCS文件的为容完全一样。 aside i background: blue; colr:#ff千 被导入的局部文件中定义的所有变量和混合器,也会在这个规则范围内生效。这些变量和混合器不会全局有效,这样 我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式 有时可用css原生的 import机制,在浏览器中下载必需的css文件。sass也提供了几种方法來达成这种 需求 3-4.原生的CSS导入; 由于sass兼容原生的css,所以它也支持原生的css@imot。尽管通常在sass中使用@ import 时,sass会尝试找到对应的sass文件并导入进来,但在下列三种情况下会生成原生的 CSS@import,尽管这会造 成浏览器解析css时的额外下载 o被导入文件的名字以css结尾 被导入文件的名字是一个URL地址(比如http://www.sass.hk/css/css.css)由此可用谷歌字体AP提供的相应 服务 被导入文件的名字是CSs的ur(值。 这就是说,你不能用sass的@ mport直接导入一个原始的css文件,因为sass会认为你想用css原生的 import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为,scss后缀,即可直接 导入了 文件导入是保证sass的代码可维护性和可读性的重要—环。次之但亦非常重要的就是注释了。注释可以帮助样式