Project requirements: the use of Sass custom generation of their own Css library, so that it is not in<style></style>To write the style, all in the class write, a shuttle (article at the end of the project address)~

Required end results:

class="w-600" = width: 600px
class="fs-24" = font-size: 24px
class="pt-20" = padding-top: 20px
Copy the code

Recommend a wave of good blog ~

  1. First of all, to recommend a good blog, nguyen other great god Sass analytic: www.ruanyifeng.com/blog/2012/0…
  2. Second, there are four ways to compile Sass: blog.csdn.net/weixin_4480…
  3. Look at the others’ code: www.cnblogs.com/andrewkz/p/…
  4. Sass document: sass.bootcss.com/documentati…

Code implementation:

Sass code:
$min: 0;
$max: 100;
$step: 2;
$map: ('pt' : 'padding-top', 'pr' : 'padding-right', 'pb' : 'padding-bottom', 'pl' : 'padding-left', 'pd' : 'padding');
$i: $min;
@while $i <= $max {
	@each $key, $value in $map {
	    .#{$key}-#{$i} {
			#{$value} : #{$i}px;
		}
	}
	$i: $i + $step;
}
Copy the code

My idea: this requirement is very simple, my idea is to use the map data type, through the Sass syntax, write two loops, and then NPM install Sass -g install, and then use Sass compile (Sass compile statement, see bottom).

Generated Css code:
.pt-0 { padding-top: 0px; } .pr-0 { padding-right: 0px; } .pb-0 { padding-bottom: 0px; } .pl-0 { padding-left: 0px; } .pd-0 { padding: 0px; } .pt-2 { padding-top: 2px; } omit several hundred lines of code belowCopy the code

I have a problem with reading a newspaper in a minute:

1. An error message is displayed when –style Compact is used for compilation
-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]
Copy the code

Maybe the Sass version was updated and deprecated.

2. A. Map file is displayed during compilation

Previous solution (invalid according to error message) :

sass dev/:build/ --sourcemap=none
Copy the code

The solution now:

sass dev/:build/ --no-source-map
Copy the code

Notes go up:

Single-file compilation:

sass dev/padding.scss build/padding.css
Copy the code

Compile dev files into build:

sass dev/:build/
Copy the code
Pit: Note that the middle must be ‘:’, otherwise it will compile in the same directory.

Project Address:Gitee.com/leeyamaster…