HowtowritereusableCSSusingSASS

以前好评文章的更多分类，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。Sass是当今广泛使用的CSS预处理器，它的流行是由于它修复了几个CSS缺陷：Sass也是Bootstrap4运行的基础。这意味着学习Sass非常有助于了解如何操作引导程序代码，而不是覆盖代码（这是大多数开发人员的自定义方法）。理解Sass可以更好地理解源代码级别的工具。在使用CSS时，我们经常在全局环境中设置，这可能会错误地设置元素样式。自定义CSS（即使使用CSS变量）仍然非常多余。CSS并不是为我们今天拥有的那种复杂架构而设计的，我们遇到了将一个样式表导入另一个样式表的问题，这可能会导致一个非常大的样式库，如果没有适当的文档可能无法理解。在本文中，我们将重点讨论为什么预处理器很重要，特别强调SASS及其将规则串在一起的能力。使用Sass为设计现代Web组件提供了一种更合乎逻辑的方法。我们还将通过示例来了解为什么使用这些预处理器，展示如何将样式划分为更小的特定组件，而不会强迫用户下载不必要的大型CSS文件。有很多方法可以安装sasssass。你可以检查这个地址。这里我们使用npm安装：npminstall-gsassCSS有什么问题？当我们开始学习前端的基础知识时，我们会接触到传统的CSS，这涉及到使用classes或ids等标识符来处理和操作HTML元素。在使用CSS的时候，我们经常需要修改样式来达到预期的要求。组织大型样式表真的很有压力。保持类的范围以避免意外设置样式有时会很烦人。尽管引入了CSS变量来减少重复声明，但使用预处理器仍然可以解决变量的一些问题。例如：更长的变量名。即使使用CSS3，我们仍然需要依靠一些技巧来设计用户界面的样式。在编写HTML时，嵌套和视觉层次样式有助于理解，但这在常规CSS中是不可能的。什么是CSS预处理器？你可以把预处理器想象成一台加工机器，一端让我们写出独特的语法，另一端帮助我们生成对应的正则CSS。CSS预处理器通常会添加一些纯CSS中不存在的特性，例如mixins、嵌套选择器、继承选择器。它还为我们提供了一种结构化的方式来编写样式。CSS预处理器有LESS、stylus、Sass、PostCSS。如前所述，本文主要将Sass作为预处理器。SASS还是SCSS？SCSS是Sass3引入的新语法，其语法完全兼容CSS3，继承了Sass的强大功能。Sass和SCSS实际上是一回事。我们通常称之为Sass。两者有两点区别：1.文件扩展名不同。Sass使用后缀“.sass”作为扩展名，而SCSS的扩展名使用“.scss”作为扩展名2.语法书写方式不同。Sass是用严格的缩进语法规则写的，没有大括号（{}）和分号（;），而SCSS的语法写法和我们的CSS语法写法很像。我们先来看一个例子：Sass语法：$font-stack:Helvetica,sans-serif$primary-color:#333bodyfont:100%$font-stackcolor:$primary-colorScsssyntax:$font-stack:Helvetica,sans-serif;$primary-color:#333;body{字体:100%$font-stack;color:$primary-color;}在上面的代码示例中，我们注意到Sass和SCSS书写风格的区别。请注意，它们都使用$来声明变量。SCSS中的概念嵌套和作用域当设置HTML文件的样式时，SCSS使我们能够在样式表中拥有相同的HTML视觉层次结构，以便我们可以以更易于理解的方式设置样式。例如，为index.html

设置样式CSS:navul{margin:0;填充：0；list-style:none;}navli{display:inline-block;}nava{display:block;填充：6px12px；文本装饰：无；}SCSS：导航{ul{边距：0;填充：0；列表样式：无；}li{显示：内联块；}a{显示：块；填充：6px12px；文字修饰：无；从上面的CSS代码示例可以看出，我们能够在保持实现简短的同时推断出HTML文件的结构。这样做的另一个好处是它有助于避免拼写错误，您还可以看到我们已经限定了一些规则的范围，因此样式仅用于导航。后代样式规则适用于SCSS，例如：.container{.left-area{...}}这意味着，具有class="left-area"的容器类的所有后代都将受到该规则的影响。基本CSS选择器仍然适用于SCSS，例如：>selector.container{>.left-area{...}}现在，只有类容器的直接子类会获得样式。css中的“>”是css3中的唯一选择器。A>B表示选择A元素的所有子B元素。与AB不同的是，AB选择所有后代元素，A>B只选择一代。styles改变元素的样式，也起到修饰符的作用，&在Scss中表达自己的意思。.container{&.right-area{background-color:#0000}}上面的代码等价于.container.right-area{background-color:#0000}我们也可以使用父选择器来限制角色class，就像代码示例中的这样，color:#fff由于父选择器的原因仅适用于.theme-dark类。变量通常，在CSS中，我们使用@import将不同的样式表链接到主CSS，这意味着必须下载额外的CSS文件。如果有一种方法可以使用SCSS将所有这些输入解析到一个CSS文件中会怎样？CSS中变量的概念来源于JS方法。请注意，SCSS中的@import用于将部分导入其他SCSS文件，但它们不会成为CSS文件，在名称前用_表示。使用scss变量SCSS中的变量以美元符号$开头。$color:#f002.color{$text_color:#ddd;背景色：$color；颜色：$text_color；text-shadow:002pxdarken($text_color,40%);}从上面的代码中，我们注意到$text_color只能在代码块内部访问。MixinsSCSS的另一个很棒的特性是它能够将可重用的样式打包在一起，并允许根据需要将样式导入另一个样式块，从而减少代码中的冗余。声明创建一个mixin就像在样式块之前添加@mixin和mixin名称一样简单@mixin{insertname}{//writeCSScodehere}示例：@mixinbutton{font-size:1em;填充：0.5em1.0em；文字修饰：无；颜色：#fff；}由于历史原因，连字符和下划线被认为是相同的，即@mixinmixin-name{}和@mixinmixin_name{}是相同的。用法要在代码块中使用mixin，我们必须使用@include后跟mixin的名称。.button-green{@include按钮；背景色：绿色；这里通过@include调用了我之前创建的名为button的mixin模块，那么解析后的CSS如下：.button-green{font-size:1em;填充：0.5em1.0em；文字修饰：无；颜色：#fff；背景色：绿色；}另一种使用mixins的方法是使用参数，就像JS中的函数一样，我们可以声明一个全局变量，并将其设置为mixin的参数，更新上面的button模块，添加一个名为background的参数传递给模块。@mixinbutton($background){字体大小：1em;填充：0.5em1.0em；文字修饰：无；颜色：#fff；背景：$背景；请注意，该参数被设置为变量并成为背景属性值。如果我们想创建一个绿色按钮，那么我们可以使用下面的代码：.button-green{@includebutton(green);你可能想知道如果在定义mixin的时候定义了参数，但是在@include调用的时候没有传递参数会怎么样。在这种情况下，您将收到一个编译错误。同时，相信这种情况一定不是大家愿意看到的。您可以通过在mixin中定义参数时为参数设置默认值来避免此错误。@mixinbutton($background:green){字体大小：1em;填充：0.5em1.0em；文字修饰：无；颜色：#fff；背景：$背景；现在，如果您在调用Value时忘记传递参数：.button-green{@includebutton;您的代码将使用您为参数设置的默认值进行解析，在本例中为值green。.button-green{字体大小：1em;填充：0.5em1.0em；文字修饰：无；颜色：#fff；背景：绿色；函数SCSS中的函数是SASS功能的重要组成部分，它们允许我们定义可以在整个样式表中重复使用的复杂操作。我们可以使用许多内置的Sass函数，查看文档以获取更多信息。这里列出了一些常用的函数：lighten($color,$amount):使颜色变浅。darken($color,$amount):使颜色变暗。adjust-hue($color,$degrees):改变颜色的色调。mix($color1,$color2,$weight):将两种颜色按照一定比例混合在一起生成另一种颜色hue($color):获取该颜色的色相分量。saturation($color)：获取颜色的饱和度分量。lightness($color)：获取颜色的亮度分量。我们也可以定义自己的Sass函数。声明和返回函数，我们需要用到两条指令，function和return，类似于其他语言中的关键字。@function函数名（参数）{@return;}使用时直接使用函数名即可：@functiongetWidth($w){@return$w*2;}.??main{max-width:#{getWidth(20)}px;}编译后：.main{max-width:40px;}带控制流的条件样式if()if()是Sass的内置函数，类似于@if是内置指令。if()用于进行条件判断并返回具体值，示例如下：@mixintest($condition){$color:if($condition,blue,red);颜色：$color}.firstClass{@includetest(true);}.secondClass{@includetest(false);}编译结果：.firstClass{color:blue;}.secondClass{颜色：红色；}在上面的例子中，if()函数中的三个参数分别代表：测试条件、测试成功返回值、测试失败返回值（除false和null之外的所有测试条件都视为测试成功）。如果在上面的例子中使用数字作为条件，它也会返回测试成功的值：.firstClass{@includetest(1);}@if@if后跟一个表达式，如果表达式的结果为真，则返回特定的样式，示例如下：@mixintxt($weight){color:white;@if$weight==bold{font-weight:bold;}.txt1{@includetxt(none);}.txt2{@includetxt(粗体);}编译结果：.txt1{color:white;}.txt2{颜色：白色；字体粗细：粗体；}@for@for指令常用于循环输出。@for有两种使用方式：从头到尾和从头到尾。两者的区别在于前者的范围是[start,end]，而后者的范围是[start,end-1]。在@for循环中使用一个固定的变量来替换遍历的元素。如果要实现从大到小的遍历，让start大于end即可。这是@for的一个简单示例：@for$ifrom1through4{.col-#{$i}{width:100/4*$i+%;}}利用上面的例子，我们可以创建一个简单的网格系统，编译结果如下：.col-1{width:25%;}.col-2{宽度：50%；}.col-3{宽度：75%；}.col-4{宽度：100%；}总结在本文中，我们试图了解使用SCSS编写函数式CSS的基础知识，也对一些Sass/SCSS原理有了一个大概的了解。我希望我们使用这些实践为我们的应用程序编写更简单、更优化的样式。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://www.proqsolutions.com...干货交流系列文章总结如下。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。