Use sublime to compile less and sass

Sass and Less is a dynamic style language, which is a kind of CSS preprocessing language, and an extension language of CSS. It uses a syntax similar to CSS and gives CSS dynamic language features, such as variables, inheritance, calculations, etc. Functions, etc., make it easier to write and maintain CSS.

One, use sublime to compile less

1. Use less to convert css files

• Install plugins less, lessc, Less2Css in Sublime

• Install Node.js and operate next directly.
  URL: https://nodejs.org/en/download/

• Open the console (win + R, enter cmd), enter node -v to verify whether the node is installed,

  To install Less globally, enter npm install less -g (enter lessc -v to verify that Less is installed).

• Enter npm install -g less-plugin-clean-css This is a plugin

• Create a new less file in Sublime, and then press ctrl + s to save, and the css file is automatically generated.

2. Introduce less files and less.js files (commonly used)

• // 自己写的less文件
  <link rel="stylesheet/less" type="text/less" href="1.less" />
  
    //引入编译less文件的js文件
  <script src="less.min.js" type="text/javascript"></script>  

• Download URL of each version of less.js:

  https://github.com/less/less.js/releases

Second, use sublime to compile sass

1. What is the difference between Sass and SCSS?

Sass and SCSS are actually the same thing. We usually call it Sass. The differences between the two are as follows:

(1). The file extensions are different. Sass uses the ".sass" suffix as the extension, while SCSS uses the ".scss" suffix as the extension

(2). Grammar is written in different ways. Sass is written with strict indented grammar rules, without braces ({}) and semicolons (;). The grammar writing of SCSS is very similar to our CSS grammar writing. similar

2. Use Sass to convert css files

• Install the plugins scss, sass, sassbuild plugins in Sublime

• SASS is written in Ruby language, but the syntax of the two is not related. I don't know Ruby, so I still use it. Just have to install Ruby first , then SASS

• Ruby website: http://www.ruby-lang.org/en/downloads/

• When installing, please check the option Add Ruby executables to your PATH to add environment variables, otherwise you will be prompted to find the ruby ​​environment when you use the compiled software in the future

• Open the console (win + R, enter cmd), enter Ruby -v to verify that Ruby is installed

• Install Node.js and operate next directly.
  URL: https://nodejs.org/en/download/

• Open the console (win + R, enter cmd), enter node -v to verify whether the node is installed,

• To install sass globally, enter gem install sass (enter sass -v to verify that sass is installed).

• Create a new scss file in Sublime, then press ctrl + S to save, and then press ctrl + B to automatically generate a css file.

• Note: When using sublim to compile scss files, be sure to compile in a non-Chinese path

—————————————–over————————————————

Author: Cai Guoqing (Xiao Zhu)