萨斯开始

>本文探讨了CSS预处理器Sass的功能，以简化您的CSS工作流程。 它已通过当前信息和改进的格式进行了更新。

sass：a css革命

>

sass可以通过变量，嵌套和混合物等功能增强CSS，使样式表更易于管理和动态。 它提供了两种语法：原始的缩进语法（简洁）和类似CSS的.scss>（更广泛地采用）。 本文侧重于.scss。

>

为什么要使用sass？ Sass拥有一个大型活跃的社区和丰富的扩展生态系统。 它的模块化和组织能力简化了大规模项目。 缩进语法和>之间的选择是偏爱问题。

>与CSS的相似性使初学者更容易。

.scss>工作流和工具.scss

>避免直接编辑>文件。而是修改文件，然后将其编译到CSS中。 这可以在构建过程中自动化，也可以使用GUI工具，例如livereload，codekit（仅MAC-horly）或prepros（跨平台）。保存更改时，这些工具会自动重新编译您的SASS，刷新浏览器以进行即时反馈。

.css SASS编码ESSENTER .scss

嵌套： sass允许嵌套选择器，反映您的HTML结构。 但是，避免过度嵌套（超过四个级别），以防止过度特定的选择器。优先考虑可重复使用的模块化代码。

• >>变量：

  使用
定义变量，以集中样式设置。 这简化了更新并保持一致性。

• $variable-name: value;函数和操作员：

• 混合素：使用>创建可重复使用的样式块，并将它们与

  一起包含。这对于处理供应商前缀或常见样式模式特别有用。
>

• >>示例：sass嵌套（好与坏）@mixin mixin-name { ... }> @include mixin-name;

  好：

坏（过度嵌套）：

示例：SASS变量

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

>>示例：sass mixin（供应商前缀）

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

>

组织您的Sass Project

$site-max-width: 960px;
$font-color: #333;

body {
  color: $font-color;
}

#main {
  max-width: $site-max-width;
}

>

>使用多个文件并将其整理到文件夹中。带有下划线的前缀部分文件（摘要）（）。 使用>。

示例：style.scss

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

用Compass

扩展SASS >文件进行配置。config.rb 用罗盘

指南针简化了精灵管理。将图像组织到文件夹中。 使用导入它们，并使用

或单个Sprite功能生成CSS类。

> @import "images/*.png";@include all-icons-sprites;>示例：指南针精灵生成

> 这将在

>文件夹中的每个图像中生成CSS类。>

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

结论images/icons

SASS显着改善了CSS的工作流程。 立即开始使用它来编写更高效，可维护和愉快的CSS。

FAQS

sass vs. scss： scss使用类似于CSS的语法（支架，半龙），而原始SASS则使用凹痕。 SCSS通常是优选的。

• >

  安装：>使用>安装node.js和npm。

• 编译：>使用或自动重新编译的选项。npm install -g sass

• （其余的常见问题是直接在原始文本中回答的，并且在这里没有重复。）

以上是萨斯开始的详细内容。更多信息请关注PHP中文网其他相关文章！