Sass/Scss

銆€銆€涓€銆佷粈涔堟槸Sass/Scss.

銆€銆€Sass鍜孲css鏄寚鐨勬槸鍚屼竴涓笢瑗裤€係ass鐨勮娉曟洿杩憆uby锛岃€孲css鏇存帴杩慶ss浠ｇ爜銆係ass/Scss鏄css鐨勬墿灞曪紝浣嗘槸scss/sass涓嶈兘涔嬮棿鐩存帴杩愯鍦ㄦ祻瑙堝櫒涓紝闇€瑕佺紪璇戞垚css.

銆€銆€

銆€銆€浜屻€佸湪鍛戒护琛屼腑瀹夎Sass鍜屼娇鐢?/span>

銆€銆€棣栧厛闇€瑕佸湪鐢佃剳涓婂畨瑁卬ode.鐒跺悗浣跨敤npm瀹夎Sass.銆€

銆€銆€npm install -g sass 

銆€銆€甯哥敤鐨勫懡浠｜/span>

銆€銆€sass main.scss main.css 銆€銆€sass --watch main.scss:main.css

銆€銆€涓夈€丼ass鐨勮娉旤/span>

銆€銆€a銆乶esting(宓屽)銆€

#main p {   color: #00ff00;   width: 97%;    .redbox {     background-color: #ff0000;     color: #000000;   } }

銆€銆€缂栬瘧鍚庯細

#main p {   color: #00ff00;   width: 97%; } #main p .redbox {     background-color: #ff0000;     color: #000000; }

銆€銆€灞炴€у祵濂楋細銆€銆€

.container {   display: -webkit-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   flex:{     direction: column;     wrap: nowrap;   }   align-items: center;   padding: 3rem 0;   box-sizing: border-box; }

銆€銆€缂栬瘧鍚庯細

.container {   display: -webkit-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   flex-direction: column;   flex-wrap: nowrap;   align-items: center;   padding: 3rem 0;   box-sizing: border-box; }

銆€銆€浼被閫夋嫨鍣ㄧ殑宓屽锛欬/span>

銆€銆€b銆乂ariables(鍙橀噺)

銆€銆€鍙橀噺鍚嶅瓧闇€瑕佷互$绗﹀彿寮€濮嬨€侟/span>

$main-color:#521751; .sass-introduction {   border: 0.05rem solid $main-color;   background: #fae5ff;   padding: 2rem;   text-align: center;   box-shadow: 0.2rem 0.2rem 0.1rem #ccc;   width: 90%;   box-sizing: border-box; }

銆€銆€缂栬瘧鍚庯細銆€銆€

.sass-introduction {   border: 0.05rem solid #521751;   background: #fae5ff;   padding: 2rem;   text-align: center;   box-shadow: 0.2rem 0.2rem 0.1rem #ccc;   width: 90%;   box-sizing: border-box; }

銆€銆€鍙橀噺琛ㄧずlist銆€

$border-default:0.05rem solid $main-color; $font-default:Arial, sans-serif; body {   font-family: $font-default;   margin: 0; } .sass-introduction {   border: $border-default;   background: #fae5ff;   padding: 2rem;   text-align: center;   box-shadow: 0.2rem 0.2rem 0.1rem #ccc;   width: 90%;   box-sizing: border-box; }

銆€銆€鍙橀噺琛ㄧずmap銆€

$colors: (main : #521751,secondary : #fa923f); .documentation-links .documentation-link {   text-decoration: none;   color: map-get($colors,main);   display: block;   padding: 0.2rem; }

銆€銆€銆€缂栬瘧鍚庛€€

.documentation-links .documentation-link {   text-decoration: none;   color: #521751;   display: block;   padding: 0.2rem; }

銆€銆€銆€銆€