1. Use Compass to create a project
In general, Sass or Scss files can be created directly in the editor. If the project is more complex then we can use Compass to create the project, the command is as follows:
compass create
The project created in this way will come with several folders:
The sass folder stores sass files or scss files, stylesheets stores css files, and config.rb is a setting file, which will be introduced later.
At the same time, it can be created with parameters:
compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js"
Obviously, each of the parameters is to set the save path of the sass file, css file, image file and js file respectively.
The config.rb file is a setting file with the following contents:
Configuration parameters can be modified individually to modify the save directory.
2. Use the sass command to compile and generate the css file
Compile a single file
sass <sass file> <css file> --style [nested|expanded|compact|compressed]
Compile and monitor a single file
sass --watch <sass file>:<css file>
build watch folder
sass --watch <sass folder>:<css folder>
3. Use the compass command to compile and generate the css file
compass compile
This command will only compile the changed Sass files, if you want to force all Sass files to be compiled, you can use:
compass compile --force
Watch folder:
compass watch
4. Four styles of compilation
Regardless of whether it is compiled in sass or compass, you can set the code style of the generated css file.
The operation method is to add the --style parameter to the command line. The value of the parameter can be nested, expanded, compact and compressed, as follows:
nested
expanded
compact single line
compressed _
5. Comments in Sass files
single line comment // comment
multi-line comment /*comment*/
Important comments /*!xxx*/ Important comments, compressed mode will also be compiled into css files.
Chinese Notes
If there is Chinese in the comment, there will be an error when compiling. You need to set the character set of sass to utf-8.
The setting method is to modify the engine.rb file and add the following content to the file
Encoding.default_external = Encoding.find('utf-8')
If you have any questions, welcome to join the group 523916260 to exchange and learn together, and there are experienced technical gurus in charge~
engine.rb file path:
C:Ruby22-x64lib ubygems .2.0gemssass-3.4.15libsass