前端CSS小技巧—SASS样式编程

最新推荐文章于 2024-06-10 12:52:49 发布

云南仟龙Mark

最新推荐文章于 2024-06-10 12:52:49 发布

阅读量319

点赞数

文章标签：前端 css sass

原文链接：https://blog.51cto.com/u_15111999/4798338

版权

今天分享下”前端CSS小技巧—SASS样式编程“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。随着越来越多的开发者使用SASS，有必要关注SASS代码数量问题。我们可以从C开始SS从语法出发，解释SASS语法的一些特点，毕竟，CSS样式指南很常见。

本文主要介绍了我个人感兴趣的一些特点，可能会让你从中受益，形成一套属于自己的SASS使用指南。

继续保持常用CSS格式规则和样式指南

本文着重讨论SASS有些内容，但在此基础上，开发者应该保持自己现有和良好的格式规则。如果你还没有开发出自己的格式规则，这里有一些风格指南的总结，应该可以帮助你形成自己的CSS写作习惯。这里只列出一些内容:

保持行缩一致
冒号/大括号前后空格数保持一致
一行一选择器，一行一规则
尽量把相关属性写在一起
由一个计划来规划类名命名规则
避免使用CSS id选择器
等等

接下来，让我们学习如何写出漂亮的SASS编写一个代码。weather类属性为例：

首先列出@extend(s)

CSS Code将内容复制到剪贴板

.weather {
@extends %module;
…
}

这样做可以让开发者保持清晰的思维，立即了解该类别与其属性及其他类别及其属性的关系，保持属性的一致性和属性重用的清晰思维。

普通样式

CSS Code复制内容到剪贴板

.weather {
@extends %module;
background: LightCyan;
…
}
　　@include(s)

.weather {
@extends %module;
background: LightCyan;
@include transition(all 0.3s ease-out);
…
}
　　这样做能够使开发者一眼看出@extend(s)和@include(s)的部署，便于自己以及其他开发者对代码的解读。你可能还会对是否区分自定义的@includes和公共来源的@includes在有些情况下做出决定（尤其是考虑到代码的可重用性和时效性）

选择器嵌套

CSS Code复制内容到剪贴板

.weather {
@extends %module;
background: LightCyan;
@include transition(all 0.3s ease);

h3 {
border-bottom: 1px solid white;
@include transform(rotate(90deg));
}
｝
　　在嵌套部分内，继续使用上述的样式规则。嵌套的部分永远都应该放在最后。

所有厂商前缀使用@mixins

厂商前缀（CSS前缀）具有非常强的时效性。由于现代浏览器的更新，这些前缀的使用将越来越少。你可以通过更新mixins里的内容（或者在你mixin里用到的一些库将自动更新）去适应这些变化。哪怕mixin只有短短一行，也没有关系。

但当某些厂商前缀的私有化非常严重时，这些前缀将非常难以标准化并且应用其他前缀或者无前缀的版本会得不偿失，我会选择放弃@mixin这些厂商前缀。比如像-webkit-line-clamp， -mscontent-zoom-chaining或者类似情形。

嵌套的层次不要超过3层

CSS Code复制内容到剪贴板

.weather {   
  .<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=cities&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">cities</span></a></span> {   
    li {   
      // no more!   
    }   
  }   
}

如果你的嵌套多余三次，你很有可能写出一个坑爹的（差劲的？）选择器。坑爹的原因不外乎这个选择器过于依赖HTML的架构（不稳定），过于详细（功能过于强大，没有弹性），或者是可重用性太差（不太可用）。同时，过多的嵌套层次容易导致代码处于晦涩难懂的境地。

如果有的时候与类相关的代码真的太多了，使得你不得已使用标签选择器。你可能需对于某个类要写的非常具体，以避免不必要的层叠。甚至有可能的话，利用extend来使用CSS里一些可重用性的特性。

CSS Code复制内容到剪贴板

.weather

h3 {
@extend %line-under;
}
}
　　嵌套的代码不要超过50行

若果SASS里的嵌套多于50行，那么它很可能不能完整的显示在编译器的一页中，这样会导致代码不易阅读，难以理解。嵌套本来是为了方便和简化思考与代码的组织。如果有违阅读性，请别嵌套。

全局与区域化的SASS文件序列相当于表格内容

换言之，它们并没有任何一种固定样式。开发者要提醒自己保持所有部分的样式风格一致，有序。

首先列出厂商/全局的库，其次列出自定义库，然后是模式，最后是每个分部的用到的库。

这样一来‘目录‘看起来就像下面这个例子一样，一目了然：

CSS Code复制内容到剪贴板

/* Vendor Dependencies */
@import “compass”;

/* Authored Dependencies */
@import “global/colors”;
@import “global/mixins”;

/* Patterns（http://www.qlyl1688.com） */
@import “global/tabs”;
@import “global/modals”;

/* Sections */
@import “global/header”;
@import “global/footer”;
　　这些文件就像是一个指南针，颜色和mixins并不产生已编译好的CSS代码，他们纯粹是独立的库。在此之后引入模式，使得重写变得更安全，不会出现专一性的冲突。

将SASS合理的分割成多个小文件

这样做没有任何不好。在情况允许的时候，尽量使用小而精的多个文件，这样便于开发者在寻找一些特定文件，而不是在几个拥有冗长代码的大文件中大海捞针。

…

CSS Code复制内容到剪贴板

@import "<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href=" http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2137%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">global</span></a></span>/header/header/";   
@import "global/header/logo/";   
@import "global/header/dropdowns/";   
@import "global/header/nav/";   
@import "global/header/really-specific-thingy/";