css sass_从SASS到CSS

css sass

SASS is a very powerful tool. I believe it's a "must have" for all projects that require more than a couple of basic selectors. It will change the way you think about CSS and more importantly, will change the way you organize and reuse your CSS.

SASS是一个非常强大的工具。 我相信对于所有需要多个基本选择器的项目来说，这都是“必不可少的”。 它将改变您对CSS的思考方式，更重要的是，它将改变您组织和重用CSS的方式。

If you don't know exactly what SASS is all about, please go ahead and read my previous article before continuing: The Power of SASS

如果您不完全了解SASS的全部内容，请继续阅读我的上一篇文章，然后再继续：SASS的力量

In that article I briefly mention the fact that browsers know nothing about SASS. Browsers can only read styles in the form of CSS. This basically means that in order to send valid CSS, we need to convert our SASS files into CSS, often referred as "compilation".

在那篇文章中，我简要提到了浏览器对SASS一无所知的事实。 浏览器只能读取CSS形式的样式。 这基本上意味着，为了发送有效CSS，我们需要将SASS文件转换为CSS，通常称为“编译”。

Here I'll present how I've been using it in different projects.

在这里，我将介绍如何在不同的项目中使用它。

经常编译而不是以后 (Compile often instead of later)

也许编译SASS的最好方法是

file save. This means that, each time you save one *.sass or *.scss file, a watcher process generates the corresponding *.css file for you. One of the main reasons for this is to avoid that the compilation process gets in the way of the normal flow of developing and testing CSS. If, each time you save a SASS file, the corresponding CSS file is generated, then there's no waiting time or tedious manual process that needs to be done.

文件保存 。 这意味着，每次保存一个* .sass或* .scss文件时，观察程序都会为您生成相应的* .css文件。 这样做的主要原因之一是避免编译过程妨碍了CSS的正常开发和测试流程。 如果每次保存一个SASS文件时都生成了相应CSS文件，则无需等待时间或繁琐的手动过程。

Keep this is mind because it's fundamental for a smooth and consensual team adoption.

请记住这一点，因为这是团队顺利，协商一致地采用的基础。

编译您的SASS的工具 (Tools to compile your SASS)

有多种编译SASS文件的方法。 这是我使用过的清单的简短清单。

使用Visual Studio (With Visual Studio)

如果您使用的是Visual Studio，则可以获取Web Essentials加载项，该加载项将编译您的SASS文件。

崇高的文字或TextMate (
Sublime Text or TextMate)

如果您是一个纯粹的前端人员，那么您可能不会喜欢上那些花哨的IDE，并且您更喜欢像Sublime Text或TextMate这样的简单文本编辑器。 在这种情况下，您仍然可以使用诸如Package Control的SCSS包之类的加载项。

使用咕unt声 (
Using Grunt)

Grunt是一个JavaScript Task Runner，可以与Java的MAVEN相提并论。 如果使用Grunt打包应用程序，则可以将SASS文件编译添加到构建过程中。 更重要的是，使用Grunt，您可以设置文件监视（例如，通过扩展名），可以在每次保存文件时触发SASS编译。 这是一个配置示例：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
        files: {
          'css/app.css' : 'sass/app.scss'
        }
      }
    },
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default',['watch']);
}

古尔普 (
Gulp)

如果您更喜欢Gulp，则它支持与Grunt相同的功能。

玛文 (
MAVEN)

我在上面提到了MAVEN，当然，我们也可以使用它来编译我们的SCSS。 学习对象的插件是完成这项工作的众多插件之一。 但是，我必须警告您，这可能不是最佳解决方案，至少不是一个单独的解决方案。 如开头所述，重要的是编译过程不会妨碍开发。 每次需要生成CSS文件时，都必须手动运行“ maven软件包”类的命令，这很快会变得很烦人。 我建议保留MAVEN配置，但要像上面的方法那样使用更多的“在线”编译方法。

在线制作模型 (Do your mock-ups online)

有时，您不需要设置项目。 您只需要做一个概念证明。 对于这些情况，您拥有一组不错的在线编辑器，它们将帮助您实现以下目标：

• http://sassmeister.com/
  http://sassmeister.com/

• http://jsfiddle.net/

  
  
  • Set SCSS as your CSS engine in the configurations

  http://jsfiddle.net/

  
  
  • 在配置中将SCSS设置为您CSS引擎

• http://plnkr.co/

  
  
  • Rename your *.css files to *.scss. An *.css file with the same name will be generated "behind the scenes"

  http://plnkr.co/

  
  
  • 将* .css文件重命名为* .scss。 具有相同名称的* .css文件将在“幕后”生成。

底线 (
Bottom line)

不要害怕尝试。 最后，只有CSS带有大量非常方便的语法附加组件。 社区也很好地支持了它，因此您一定会找到一种在开发过程中包含它的好方法。

Have fun!

玩得开心！

翻译自: https://www.experts-exchange.com/articles/23919/From-SASS-to-CSS.html

css sass