Sheria zilizowekwa za lugha ya SASS. Kuandaa mazingira ya kazi ya Sass. Hivi ndivyo nilivyofanya hapo awali

Habari marafiki!

Hii mwongozo wa kina by preprocessor Sass kwa wanaoanza. Hapa tutafahamiana na mtayarishaji wa Sass, faida zake, syntax na kuzingatia matumizi yake na mifano.

Baridi

Pamoja

Kigugumizi

Suala la mfadhili - mshirika mwenyeji: partnerwp.ru

Unaweza kupakua mifano yote ya Sass/CSS na mradi wa Gulp uliobinafsishwa wa mafunzo haya kutoka GitHub.

Sass ni mojawapo ya watayarishaji wa awali wa CSS walioendelezwa zaidi na imara, pamoja na mojawapo ya watayarishaji maarufu zaidi kati ya wataalamu.

Faida za Sass

Sambamba na matoleo tofauti CSS, shukrani ambayo unaweza kutumia maktaba yoyote ya CSS katika mradi wako;
Idadi kubwa ya utendaji tofauti kwa hafla yoyote. Wachakataji wa awali wa CSS wanaweza kujivunia utendakazi mzuri kama huu;
Sass ni mojawapo ya watayarishaji wa awali wa CSS, wakiwa wamechukua uzoefu mwingi kwa miaka mingi ya kuwepo kwake;
Fursa nzuri ya kutumia mifumo ya Sass ambayo hurahisisha maisha kwa msanidi programu. Mfumo mmoja kama huo ni Bourbon, ambao tunautumia katika baadhi ya matoleo ya Jedi tunapoandika Sass;
Sintaksia. Unaweza kuchagua moja ya sintaksia mbili zilizo karibu nawe - kilichorahisishwa (SASS) na kupanuliwa kama CSS (SCSS).

Nilipofahamiana kwa mara ya kwanza na wasindikaji wa CSS, mimi, kama watengenezaji wengine wengi wapya wa wavuti, sikuelewa kikamilifu wazo la kutumia vichakataji awali vya CSS. Kwa nini utengeneze safu ya ziada, tumia zana kadhaa, ugumu wa CSS, nilifikiria. Lakini baada ya muda, nilianza kuelewa kwamba siku baada ya siku kuandika CSS ikawa mateso, utaratibu wa kijivu; vitendo vingi vilipaswa kurudiwa, wateuzi, mali, na hata vizuizi vyote vya msimbo wa CSS vilipaswa kunakiliwa ili kufikia matokeo yaliyohitajika. Leo, kwa kutumia mifano, nitakuonyesha jinsi unavyoweza kurahisisha kazi yako kwa kutumia kichakataji cha Sass, kubadilisha maendeleo yako, na hata kuwa na furaha kidogo kuandika kazi ngumu zaidi au zisizo ngumu.

Kuweka mazingira

Kama mazingira ya kufanya kazi na Sass katika somo hili, kama katika masomo yetu mengine, tutatumia toleo la Sass kwa msimamizi wa kazi wa Gulp ( gulp-sass) Ili kutumia toleo la awali la Ruby au kukusanya Sass kwa kutumia programu maalum, unaweza kusoma maagizo kwenye ofisi. tovuti. Somo hili kimsingi ni ya vitendo, kwa hivyo hatutakaa juu ya chaguzi zinazowezekana za kuunganisha kwenye mradi; tutaunganisha Sass kwa njia maarufu zaidi, kwa kutumia Gulp.

Hakikisha umesakinisha toleo la hivi punde Node.js na Gulp. Ikiwa Node.js haijasakinishwa, ipakue na uisakinishe. Baada ya kusakinisha Node.js, weka gulp na amri "npm i -g gulp"(Windows) au "sudo npm i -g gulp"(Linux, OS X). Soma:.

Npm i --save-dev gulp gulp-sass

Var gulp = hitaji("gulp"), // Unganisha Gulp sass = hitaji("gulp-sass"); // Unganisha kifurushi cha Sass gulp.task("sass", kazi() ( // Unda kazi "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // Chukua source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Badilisha Sass kuwa CSS ukitumia gulp-sass .pipe(gulp. dest(" css")) // Pakia matokeo kwenye folda ya css)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Tazama nyuma ya faili za sass kwenye folda ya sass)); gulp.task("chaguo-msingi", ["saa"]);

Zingatia mstari wa 6 - hapa tunatumia moja ya mitindo ya pato kwa faili inayosababisha: kiota- nested, by default; kupanuliwa- kupanuliwa; kompakt- compact, wakati selector na mali yake katika braces curly huonyeshwa kwenye mstari mmoja; imebanwa- imebanwa. Kwa kuongeza, shukrani kwa usindikaji .on("kosa", sass.logError) Hitilafu ikitokea, hatutahitaji kupakia tena amri ya utekelezaji ya Gulpfile na tutaona ni mstari gani wa faili ya Sass ambao tuna hitilafu. Katika mifano nitatumia mtindo wa pato kupanuliwa kwa uwazi.

Lazima uwe nayo muundo unaofuata mradi wako mfumo wa faili:

mradi wangu/
- css/
  - kawaida.css
- sass/
  - kawaida.sass
- nodi_moduli/
- gulpfile.js
- kifurushi.json

Tunaanza utekelezaji wa Gulpfile na amri gulp kwenye terminal ya folda ya mradi.

Hapa tunachukua faili zote za Sass kutoka kwenye saraka sass/ mradi wako na upakie matokeo ya CSS yaliyokamilishwa kwenye folda css/. Kwa kuongeza, hapa tunaanzisha uchunguzi kuangalia kwa mabadiliko katika faili za Sass na ujumuishaji wa kiotomatiki katika CSS, ikiwa mabadiliko kama haya yatafanyika. Faili ya css inayotokana imejumuishwa kwenye mpangilio.

Ikiwa hauelewi kitu juu ya kusanidi vifurushi vya Gulp ndani katika mfano huu, soma mwongozo wa Gulp.

Baada ya mazingira yetu kusanidiwa na Sass kubadilishwa kuwa CSS wakati wa kuhifadhi faili za *.sass kwenye saraka. sass/, unaweza kuendelea kwa usalama kujifunza na kutekeleza mifano ambayo tutachambua leo kwa vitendo.

Sintaksia ya Sass

Kuna anuwai 2 za uandishi wa Sass, sintaksia 2: SASS na SCSS. Wengi toleo la zamani Sass kuandika ni sintaksia ya ujongezaji. Hii ndiyo tahajia tutakayotumia katika somo letu. Kiendelezi cha faili cha sintaksia hii ni *.sass. Chaguo la pili ni syntax, kupanua Sintaksia ya CSS , Sassy CSS. SCSS imeandikwa kama CSS ya kawaida, lakini imeimarishwa na vipengele vya ziada vya Sass. Ugani wa faili na syntax ya SCSS - *.scss.

Muhimu sana! Sintaksia ya ujongezaji inahitaji uzingatiaji mkali sana wa uwekaji wa sifa zilizowekwa kiota, na ikiwa utapata makosa wakati wa kuendesha Gulp au makosa dhahiri bila kutaja mstari kwenye kiweko, kuna uwezekano mkubwa kwamba hitilafu iko katika uwekaji alama usio sahihi. Maelezo mengine muhimu - ikiwa unatumia tabo kama indents, mkusanyaji atatupa kosa unapojaribu kubadilisha Sass, ambayo, pamoja na tabo, pia hutumia nafasi kama indents. Labda unatumia tabo pekee au nafasi pekee.

Sintaksia ya SASS na SCSS:

SASS - Sintaksia ya Kuelekeza	SCSS - syntax ya ugani
$font-stack: Helvetica, sans-serif $primary-color: #333 fonti ya mwili: 100% $rangi ya rafu ya fonti: $primary-color	$ font-stack: Helvetica, sans-serif; $ msingi-rangi: # 333; mwili ( fonti: 100% $font-stack; rangi: $primary-color; )

Mbali na sheria za msingi za uandishi (braces curly, semicolons mwishoni mwa mistari), SASS na SCSS pia hutofautiana katika uandishi wa kazi zingine. Kwa hivyo kuwa mwangalifu unapotumia mifano yoyote kutoka kwa Mtandao, angalia ni syntax gani inatumika. Ikiwa mfano mkubwa kutoka kwa Mtandao unafanywa kwa mtindo wa SCSS, na mradi wako umeandikwa kwa SASS, unaweza kuiingiza kwenye faili yako kuu bila kubadilisha syntax na ugani wa faili kwa kutumia maelekezo. @kuagiza, kwa mfano, ikiwa umepakua faili jukwa.scss, basi unaweza kuiunganisha na yako kuu.sass mstari @import "jukwaa". Unaweza pia kufanya hali kinyume, wakati unahitaji kuagiza faili * .sass kwenye faili kuu.scss. Katika mfano wetu kutoka Github, tunaingiza kila kitu _x.x.sass faili kuwa moja kawaida.sass, ambapo x.x ndio nambari ya kichwa ya mfano kutoka kwa nakala hii.

Tutatumia sintaksia ya ujongezaji.

1. Kupanua CSS na Sass

1.1 Sheria za uwekezaji

Sass huwapa wasanidi programu fursa nzuri ya kuweka sheria za CSS ndani ya zingine, na hivyo kupunguza muda unaotumika kuandika/kunakili viteuzi virefu na kufanya msimbo kuwa muundo zaidi, kwa mpangilio wazi.

1.2 Kuunganisha kwa kiteuzi cha mzazi

Ikiwa unataka kupanua kiteuzi bila kuunda sheria mpya, unaweza kufunga viteuzi vya ziada kwa kiteuzi kilichokamilika kwa kutumia ishara. & . Kwa nje inaonekana kama kiumbe kichaguzi cha watoto katika uongozi, lakini kwa kutumia & , tunaongeza kiteuzi cha mzazi badala ya kuunda mtoto.

Makini na sheria body.firefox &, ambayo huturuhusu kupata mnyororo mpya kutoka kwa kipengele chochote kabla ya kile cha sasa ikiwa imewekwa mwishoni & .

Zaidi ya hayo, kuunganisha kwa wazazi kunaweza kutumika kuunda viteuzi kiwanja:

1.3 Sifa zilizoachwa

Kwa urahisi, unaweza kuvunja kiambishi tamati cha nafasi ya jina katika viambatisho. Kwa mfano, ukingo-juu, ukingo-chini ukingo- kushoto, ukingo-haki kuwa msingi wa pamoja ukingo na inaweza kugawanywa katika viambatisho kama ifuatavyo:

1.4 Wateuzi wa kadi-mwitu

Wakati mwingine hali hutokea wakati vipengele kadhaa kwenye ukurasa hutumia msingi sawa wa CSS, seti sawa ya mali, maalum kwao tu. Sheria hizi za msingi za CSS zinaweza kusakinishwa kama kiteuzi cha kadi-mwitu kwa ajili ya matumizi katika maeneo mengi katika Sass. Viteuzi vya kadi-mwitu vinakisiwa kwa kutumia maagizo @kupanua.

2. SassScript

SassScript inakuwezesha kupanua uwezo wa Sass kwa kiasi kikubwa kupitia matumizi ya vigezo maalum, hesabu na kazi nyingine. SassScript inaweza kutumika kwa kizazi kiotomatiki wateuzi wapya na mali.

2.1 Vigezo katika Sass

Ni kipengele kizuri sana kuweza kufafanua viambajengo vinavyoweza kutumika popote kwenye faili yako ya Sass. Rangi, maadili ya msingi, vitengo, yote haya yanaweza kuchukuliwa kuwa kutofautiana na kutumika katika siku zijazo. Tofauti hufafanuliwa kama hii: $name: thamani.

2.2 Uendeshaji na nambari na masharti + ukalimani

Sass hukupa uwezo wa kutumia utendakazi wa kawaida wa hesabu kwenye nambari, kama vile kuongeza (+), kutoa (-), kugawanya (/), na modulo (%). Waendeshaji kulinganisha (<, >, <=, >=, ==, !=) pia zinatumika kwa nambari.

Kwa kuongeza, Sass ina uwezo wa kuunganisha (kuunganisha) masharti.

Kama tunaweza kuona kutoka kwa mfano Jumla ya $: 10 + 20 / 2, kipaumbele kinazingatiwa katika kufanya shughuli za hesabu - mgawanyiko wa kwanza, kisha kuongeza. Ili kufafanua utaratibu wa shughuli, unaweza kutumia mabano, kama katika hisabati. Tafadhali kumbuka kuwa wakati wa kuongeza 12px + 8px, tutapata 20px.

Pia makini na mstari wa 2 na 9, hapa tunatumia tafsiri kuweka thamani zinazobadilika popote kwenye faili ya Sass, ikiwa ni pamoja na mahali ambapo tuna jina la mali, jina la kiteuzi, au kwenye mstari wowote. .

Tafsiri- huku ni kupata thamani mpya kwa kutumia wengine.

Matumizi ya kawaida ya ukalimani katika Sass ni kupata thamani mpya ya kutofautisha kwa "kuiunganisha" katika thamani ya kutofautisha nyingine, kupitia ujenzi. #{} , Kwa mfano:

Hauwezi tu kuingiza kibadilishaji kwenye kamba bila kutumia tafsiri, kama unavyoweza kufanya katika PHP, kwa mfano, katika nukuu mara mbili. Hakikisha unatumia tafsiri katika vigeu.

2.3 Uendeshaji na maua

Rangi katika Sass zinaweza kuongezwa, kupunguzwa, kugawanywa na kuzidishwa. Shughuli zote za hesabu zinafanywa kwa kila rangi tofauti: nyekundu, kijani na bluu.

Tafadhali kumbuka kuwa wakati wa kuongeza rangi za rgba, kigezo cha mwisho cha opacity 0.75 lazima kiwe tofauti na zingine kwenye usemi, vinginevyo nyongeza itashindwa. Badala yake, unaweza kurekebisha rgba alpha channel kwa kutumia opacify Na weka uwazi au dhibiti uwazi wa rangi ya HEX kwa kutumia kitendakazi cha rgba.

3. Maagizo na sheria

3.1 @kuagiza

Unaweza kuingiza kwenye faili yako ya Sass sass, scs Na css faili kwa kutumia maagizo @kuagiza, wakati mchanganyiko na vigezo vyote vitafanya kazi katika faili kuu ambayo uingizaji hutokea.

@import itafanya kazi kama CSS ya kawaida @import ikiwa:

sasa kwenye njia ya faili http://;
faili inaitwa kupitia url();
au uagizaji una vigezo vya midia.

Ili faili nyingine iagizwe kikamilifu kwenye faili kuu ya Sass, ugani wa faili lazima uwe *.sass, *.scss au *.css.

Hebu tuangalie mifano fulani.

Faili zifuatazo zinaletwa sitafanya:

Faili zifuatazo mapenzi zilizoagizwa:

Makini! Katika matoleo mapya gulp-sass ili kuleta faili za CSS kwenye Sass unahitaji kubainisha kiendelezi cha .css

Inawezekana kuagiza faili nyingi, zikitenganishwa na koma: @ import "header", "media".

Faili zinazoanza na underscore zinaitwa vipande na hauhitaji mistari chini au viendelezi kubainishwa wakati wa kuingiza. Kwa mfano, faili _kichwa.sass inaweza kuingizwa kama hii: @ import "header".

Kumbuka kuwa uagizaji hutokea mahali unapobainisha maagizo @kuagiza. Ipasavyo, inawezekana kufanya uagizaji wa kiota mahali ambapo ni muhimu:

#kuu @import "mfano"

3.2 @mzizi

Maelekezo @mzizi huinua sheria zilizomo ndani yake hadi mizizi, kufuta mlolongo kutoka kwa mzazi. Kila kitu ni rahisi hapa:

Hatukuangalia maagizo yote yaliyo katika Sass, lakini tu yaliyotumiwa zaidi katika mazoezi. Ikiwa ungependa kuzama zaidi katika maagizo ya Sass, angalia hati.

4. Maneno

Sass inasaidia kutumia misemo na vitendaji kwa hali mbalimbali, utekelezaji wa kitanzi, n.k.

4.1 @if() Maelekezo

Maelekezo @kama() inaruhusu SassScript kutekelezwa chini ya hali fulani na ina syntax ifuatayo:

4.2 @kwa Maagizo

@kwa huonyesha kizuizi chenye mitindo idadi fulani ya nyakati. Unaweza kuweka kigezo cha kukabiliana wakati wa kukimbia.

Unaweza kubainisha kupitia badala ya kwenda, ikiwa unahitaji kwenda kutoka 1 hadi 11 pamoja, na sio tu hadi 10, kama katika mfano.

4.3 @kila Maagizo

Ikiwa unataka kurudia kupitia orodha ya maadili badala ya nambari tu, unaweza kutumia maagizo @kila:

4.4 @wakati Maagizo

@wakati loops kupitia vitalu vya mtindo wakati usemi ni kweli.

5. Mchanganyiko

Hagfish- Vizuizi vya msimbo wa Sass (au mchanganyiko wa template), ambayo inaweza kuchukua hoja (hiari) na inaweza kupanua kwa kiasi kikubwa uwezekano wa mitindo ya kuandika na kupunguza muda unaotumika katika kutumia sheria sawa na hata vitalu vyote vya CSS. Ni kitu kama kipengele cha kukokotoa ambacho kinaweza kuchukua hoja, kufanya kazi kubwa, na kutoa matokeo kulingana na kigezo cha ingizo.

Mchanganyiko unatangazwa na maagizo @mchanganyiko, baada ya tangazo lazima ionyeshwe Jina samaki wa nguruwe. Imeitwa na maagizo ya mchanganyiko @pamoja na, ambayo inachukua jina la mchanganyiko na hoja zilizopitishwa, ikiwa zipo.

Marafiki, tumeangalia sifa kuu za Sass, ambazo zinatosha kwa kazi yenye matunda na mitindo ya tovuti ya CSS. Baadhi ya maagizo na vipengele havijajumuishwa mwongozo huu, lakini ikiwa una nia ya kujifunza kuhusu vipengele vyote vya Sass, itakuwa muhimu.

Nitajibu swali mara moja - jinsi ya kufanya kazi na mitindo ya Sass kwenye tovuti iliyokamilishwa, ni muhimu kuhariri CSS iliyokamilishwa na kuipakia kupitia FTP? Hapana, huwezi kufanya hivyo. Unapaswa kuwa na nakala ya ndani ya mitindo yako ya Sass au hata tovuti nzima na, baada ya kumaliza kazi, peleka (pakia) kupitia FTP. mitindo iliyotengenezwa tayari. Kwa hili, unaweza kutumia mfuko wa Gulp vinyl-ftp. Au weka mazingira ya Sass kwenye seva yako ili kukusanya faili zilizopakiwa kupitia FTP/sFTP.

Ni hayo tu kwa leo. Asante kwa umakini wako!

Sass ni nini, kwa nini inahitajika, uwezo wake, ufungaji na jinsi ya kuitumia katika miradi yako

Sass ni nini

Sass(Syntactically Awesome Stylesheets) ni mojawapo ya vichakataji vya hali ya juu zaidi, thabiti na vyenye vipengele vingi. Ni maarufu sana kati ya watengenezaji. Sass ni zaidi ya juu toleo la CSS ambalo lina sana vipengele zaidi, na Sass imeundwa kwa ajili ya kurahisisha karatasi za mtindo wa kuteleza.

Syntax ya Sass ina aina 2: SASS Na SCSS. SCSS inafanana zaidi na CSS, wakati SASS ni tofauti kwa kukosekana kwa braces curly. Vipengele vilivyoorodheshwa hutekelezwa kwa kutumia ujongezaji. Hii ndiyo syntax tutakayotumia hapa.

Kwa nini unahitaji Sass?

Ili kuelewa kwa nini Sass inahitajika, hebu tuorodheshe baadhi yake: uwezekano:

Sass inaruhusu kuota Sheria za CSS ndani ya kila mmoja
Kiota cha mali
Kutumia Vigezo
Usaidizi wa hesabu
Operesheni na maua
Uwezo wa kuagiza faili ya sass sass, scs Na css mafaili
Kutumia Mchanganyiko
Na mengi zaidi

Kwa kifupi, kwa nini unahitaji Sass: it huongeza kasi Na hurahisisha mchakato wa maendeleo.

Jinsi ya kutumia Sass

Zipo njia tofauti anza kutumia Sass:

Kutumia programu (Koala, CodeKit, Compass na zingine)
Kutumia mstari wa amri
Kwa kutumia wasimamizi wa kazi
Badilisha kwa urahisi Sass hadi CSS kwa kutumia huduma za mtandaoni

Fikiria kutumia Sass kwa msimamizi wa kazi Gulp. Kabla ya kuanza ufungaji, inashauriwa kujijulisha na misingi ya Gulp.

Kufunga na kuunganisha gulp-sass

Ili kusakinisha programu-jalizi gulp-sass kwa mradi wetu, fungua mstari wa amri kwenye folda ya mradi. Wacha tuingize amri ifuatayo:

npm i gulp - sass -- save - dev

Programu-jalizi itasakinishwa kwenye folda ya node_modules na ingizo sambamba litaongezwa kwenye faili ya package.json. Baada ya ufungaji wa mafanikio tunahitaji kuziba kifurushi chetu kwenye faili gulpfile.js.

var gulp = need("gulp"); sass = need("gulp-sass");

Sasa hebu tuunde kazi sass.

gulp. task ("sass" , function ()( return gulp . src ( "app/sass/main.sass" ) . bomba ( sass (). on ( "error" , sass . logError )) . bomba ( gulp . dest ( "programu/css"));));

gulp.src- Tunachukua nini kwa usindikaji?

.bomba(sass())- Badilisha Sass kuwa CSS

sass()- katika mabano unaweza kutaja mipangilio ya ziada onyesha CSS wakati wa kutoka.
Kwa mfano, sass((outputStyle: " kupanuliwa")) - CSS iliyopanuliwa kikamilifu.
Maana zingine: kiota(chaguo-msingi), kompakt- kila kichaguzi kimewashwa mstari tofauti, imebanwa- yote katika mstari mmoja.

Ikiwa tunafanya makosa ghafla, tunaweza kuonyesha ujumbe kwenye skrini ambapo iko. Ili kufanya hivyo, hebu tuongeze .on("kosa", sass.logError).

Wacha tutekeleze kazi yetu iliyoundwa gulp-sass. Kwenye mstari wa amri tunaingia gulp sass.

Gulp alibadilisha kiotomatiki SASS hadi CSS na kuunda faili kuu.css.

Ikiwa unahitaji kuchagua sio faili moja, lakini kadhaa, unaweza kuchagua faili zote mara moja. Ili kufanya hivyo, hebu tubadilishe mstari ambapo tunachagua faili za sass kwa uongofu:

gugumia. src("programu/sass/**/*.sass")

sass/**/*.sass- inamaanisha kuchagua faili zote (na kiendelezi .sass) kwenye folda zote za folda ya sass.

Kwa muhtasari: iliunganisha programu-jalizi gulp-sass, imeunda jukumu sass na kuongeza pato la makosa (ikiwa moja litatokea). Sasa unaweza kufanya kazi ya msingi. Wale. tax gulp-sass yetu itazinduliwa kwa amri gulp.

gugumia. task("default" , ["sass" ]);

Tunapata gulpfile.js ifuatayo

var gulp = need("gulp"); var sass = need("gulp-sass"); gugumia. task ("sass" , function ()( return gulp . src ( "app/sass/**/*.sass" ) . bomba ( sass (). on ( "error" , sass . logError )) . bomba ( gulp . dest ("programu/css"))); gugumia. task("default" , ["sass" ]);

Hebu tuangalie baadhi ya vipengele vya Sass kwa kutumia mifano.

Kuna idadi kubwa yao, wacha tuzingatie zile maarufu tu. NA orodha kamili inaweza kupatikana kwenye tovuti rasmi.

Uwekaji wa kanuni

Kiota cha mali

Kwa kutumia $variables

Uendeshaji wa hesabu na nambari

Uendeshaji wa hesabu na rangi

Sass inaruhusu sheria za css, kuwa ndani ya kila mmoja. Sheria ya ndani inatumika tu ndani ya kiteuzi cha sheria cha nje. Hakuna njia nyingine ya kutafsiri hii, kifungu ni cha busara, lakini kwa kweli kila kitu ni rahisi, angalia tu mfano:

Scss faili

#p kuu (

rangi : #00ff00 ;

upana: 97%;

Redbox (

rangi ya asili : #ff0000 ;

rangi : #000 ;

CSS iliyokusanywa

1 2 3 4 5 6 7 8

#p kuu (

rangi : #00ff00 ;

upana: 97%;

#main p .redbox (

rangi ya asili : #ff0000 ;

rangi : #000 ;

Hii husaidia kuepuka kurudia kiteuzi cha mzazi, na hurahisisha kikundi kuelewa tabaka za css na idadi kubwa ya wateuzi waliowekwa kiota. Kwa mfano:

Scss faili

10 11 12

#kuu (

upana: 97%;

p , div (

saizi ya herufi: 2m;

font-uzito: ujasiri;

kabla (

saizi ya herufi: 3m;

CSS iliyokusanywa

11 12 13 14

#kuu (

upana: 97%;

#kuu p ,

#div kuu (

saizi ya herufi: 2m;

#p a kuu ,

#div kuu a (

font-uzito: ujasiri;

#kabla kuu (

saizi ya herufi: 3m;

Marejeleo ya mzazi wa wateule (&)

Haijulikani kwa nini watengenezaji wa Sass waliiita hivyo. Kwa ujumla, ili kuiweka kwa urahisi, hii inaweza kuitwa kumbukumbu kwako mwenyewe. Ikiwa sijakosea, ndivyo nyaraka za less's zinaita (hebu nikumbushe kwamba less alichukua vitu vingi kutoka kwa sass, na pia alikopa muundo huu). Labda wengi watauliza swali, hii ni ya nini? Hebu tuanze na ukweli kwamba bila ujenzi huu haitawezekana kutekeleza darasa moja la pseudo. Au mfano mwingine, tunahitaji kutoa mitindo mingine ya kipengele kulingana na darasa gani mwili hati ya html. Nitakuonyesha kwa mfano kutoka kwa nyaraka rasmi.

Scss faili

1 2 3 4 5 6 7 8 9 10

font-uzito: ujasiri;

maandishi-mapambo: hakuna;

&:tetemeka (

maandishi-mapambo: sisitiza;

body .firefox & (

font-uzito: kawaida;

CSS iliyokusanywa

1 2 3 4 5 6 7 8 9 10

font-uzito: ujasiri;

maandishi-mapambo: hakuna;

a: tembea (

maandishi-mapambo: sisitiza;

body .firefox a (

font-uzito: kawaida;

Nadhani kila kitu kiko wazi na madarasa ya uwongo. Hebu tuangalie kwa karibu mstari body.firefox &. Nini kinaendelea hapa? Ikiwa kiunga chako mwenyewe kitaonekana nyuma ya kitu fulani (hapa kinaweza kuwa kama moja kipengele cha html, na darasa, kitambulisho, sio muhimu kabisa), basi hii inamwambia mkusanyaji kwamba mpangilio huu unaghairi uwekaji wa kawaida wa vipengee. Mkusanyaji ataondoa kipengee kama hicho kutoka mkondo wa kawaida. Ukiangalia mfano hapo juu, unaweza kupata hisia kwamba css itakusanywa ambayo kutakuwa na mwili.firefox a, lakini hapana. Rejea yenyewe hufuata kipengee na darasa, kwa hivyo mkusanyaji atatoa mwili.firefox a(kiota cha kawaida cha vitu kimeghairiwa). Hili ni jambo la msingi na linahitaji kueleweka. Wanaoanza ambao wamebadilisha tu kwa mtayarishaji fulani hawaelewi kabisa jinsi urejeleaji unavyofanya kazi, na mara nyingi huandika msimbo ambao haufanyi kazi. Unahitaji tu kukumbuka hii.

Scss faili

1 2 3 4 5 6 7 8 9

#kuu (

rangi: nyeusi;

font-uzito: ujasiri;

&:tetemeka (

rangi: nyekundu;

CSS iliyokusanywa

1 2 3 4 5 6 7 8 9

#kuu (

rangi: nyeusi

#kuu (

font-uzito: ujasiri;

#kuu a:elea (

rangi: nyekundu;

Katika mfano hapo juu unaweza kuona kwamba kumbukumbu yenyewe &:tetemeka imewekeza #kuu na kuwekeza a, inasimama peke yake, hakuna vipengele mbele yake, kwa hivyo nesting ya kawaida hufanya kazi na mkusanyaji hutoa #kuu a:elea juu.

Kwa nyakati tofauti ulimwengu uliishi mapinduzi ya kiufundi. Hii ilitokea kwa kishindo. Takribani, shaba, na bam, Enzi ya Chuma ilifika. Sasa hatujui ni nani aliyevumbua gurudumu au jembe, lakini wakati huo uvumbuzi huu ulikuwa wa kimapinduzi na kubadilisha maisha ya watu binafsi na wanadamu wote. Katika maisha ya mtandao, au zaidi hasa, katika maisha ya wabunifu wa mpangilio, kulikuwa na ubunifu tatu ambao ulibadilisha maisha yao, na kuibadilisha kwa kiasi kikubwa. Ya kwanza ni, bila shaka, karatasi za mtindo wa kuteleza, lakini hiyo ilikuwa katika siku za mwanzo za wavuti. Ya pili ni jQuery, sasa kusafiri kwa mtindo wa DOM imekuwa rahisi na rahisi, pamoja athari tofauti. Na tatu, hii tayari ni zaidi nyakati za kisasa, hii ni BEM. Kubali kuandika kitu kizuri mara moja, na kisha uitumie kwenye miradi tofauti bila matatizo yoyote. Muundo ufuatao wa lugha ya Sass utakusaidia kwa hili.

Scss faili

1 2 3 4 5 6

#kuu (

rangi: nyeusi;

&-upau wa kando (

mpaka: 1px nyekundu imara;

CSS iliyokusanywa

1 2 3 4 5 6

#kuu (

rangi: nyeusi;

#ubao-kuu (

mpaka: 1px nyekundu imara;

Nilichukua mfano kutoka kwa nyaraka. Katika maisha halisi, kulingana na BEM, hii haitakuwa id-ik #kuu A .kuu, lakini kiini hakitabadilika. Nitakupa rahisi

27.07.2017

Mfululizo huu wa mafunzo ya SASS umekusudiwa kwa wanaoanza na watengenezaji wazoefu. Hili ni somo la kwanza kati ya somo la sehemu nne ambalo litakupitisha kwenye kichakataji awali, kukisakinisha, na kujifunza kuhusu baadhi ya vipengele vyake.

SASS ni nini?

SASS (Laha za Sinema za Kuvutia)- moja ya maarufu zaidi. Ni seti ya vitendaji vya CSS vinavyokuruhusu kuweka msimbo haraka na kwa ufanisi zaidi. SASS inasaidia kuunganishwa na Firefox Firebug. SassScript hukuruhusu kuunda vigeu, mitindo iliyowekwa kiota, na viteuzi vilivyorithiwa.

SASS huifanya iwe haraka na rahisi kuandika kidogo (wakati mwingine chini sana) msimbo wa CSS na kuidhibiti kwa nguvu kama lugha ya programu (sio lugha ya programu, kwa njia). Hii chombo kikubwa kuandika CSS inayofanya kazi zaidi na safi zaidi inayoweza kuharakisha utendakazi wa mbuni na msanidi yeyote.

Kwa nini unahitaji SASS?

Mifumo mingi ya mbele, ikijumuisha Bootstrap, Materialize na Foundation, imeundwa kwa kichakataji hiki bora zaidi. Kujua SASS kutakusaidia kutumia vipengele zaidi vya mifumo hii.

Jinsi ya kutumia SASS?

Kuna programu nyingi zinazofanya iwe rahisi na haraka kuanza kutumia SASS: CodeKit, Compass, Koala, nk. Utajifunza juu yao katika sehemu zingine za somo. Katika sura hii, hatutatumia programu au zana zozote isipokuwa zile zinazohitajika kuendesha SASS kwenye kompyuta. Huwezi kuwa na wasiwasi kuhusu mfumo wa uendeshaji kwa sababu kila kitu kitakuwa wazi kwa watumiaji wote.

Pakua na usakinishe SASS

Unaweza tu kusakinisha SASS kwenye mashine ambayo tayari imesakinisha Ruby:

Ruby huja ikiwa imesakinishwa awali kwenye Mac, ili uweze kusakinisha Sass Macintosh mara moja;
Ikiwa uko kwenye Windows, utahitaji kupakua Ruby kwanza;
Ruby kwenye Linux inaweza kupakuliwa kupitia kidhibiti cha kifurushi kinachofaa, rbenv au rvm.

Ruby ikishasakinishwa, unaweza kusakinisha SASS kwenye mashine yako. Wacha tufungue safu ya amri ya Ruby na tusakinishe SASS kwenye mfumo wako:

Gem kufunga sass

Ikiwa amri hapo juu haifanyi kazi, basi unaweza kulazimika kutumia sudo amri:

Sudo gem install sass

Ikiwa unataka kuangalia toleo la SASS tumia amri ifuatayo:

SASS imewekwa. Wacha tuunde folda ya mradi na tuiita sass-msingi. Unda html ya msingi faili na nambari ifuatayo:

Mradi wangu wa Kwanza wa SASS

Habari rafiki ninajifunza SASS na inapendeza sana.

Mwili( panga maandishi: katikati; ) h1( rangi: #333; ) p( rangi: #666; )

Sasa unahitaji kukusanya faili hii kwa kutumia mstari wa amri / terminal. Wacha tufungue haraka ya amri kwenye saraka sawa (unaweza kulazimika kutumia upesi wa amri ya Ruby ikiwa haraka ya amri haifanyi kazi). Andika yafuatayo na ubonyeze Enter:

Sass --watch style.scss:style.css

Utagundua kuwa faili mpya zimetolewa: style.css na style.css.map. Inafaa kukumbuka kuwa hauitaji kugusa faili ya ramani, kama faili ya .css. Ikiwa unataka kufanya mabadiliko yoyote, unaweza kufanya hivi kupitia style.scss. Huhitaji kurudia mchakato huu kila wakati unapobadilisha mitindo. Ukusanyaji wa SASS utafanya kazi kiotomatiki unapofanya mabadiliko kwenye faili ya .scss.

Katika sura inayofuata, tutaangalia vigezo vya SASS na kwa nini ni kipengele muhimu zaidi katika SASS (na kichakataji chochote kingine cha CSS).

Tafsiri ya makala: Mwongozo Kabisa wa Mwanzilishi wa Sass.
Andrew Chalkley.

SASS ni nini?

SASS ni kifupi cha Laha za Mitindo za Kustaajabisha- lugha ya metali ndani Msingi wa CSS, ambaye jina lake linaweza kutafsiriwa kama "CSS yenye syntax bora", iliyoundwa na Hampton Catlin.

Ni njia ya kurahisisha mchakato wa malezi Mitindo ya CSS, ambayo hurahisisha sana kazi ya kuendeleza na hatimaye kudumisha kanuni.

Je, umewahi, kwa mfano, wakati wa kumhudumia mteja fulani asiye na maamuzi, ilibidi upitie maudhui yote ya faili ya mtindo ili kupata thamani maalum ya rangi ya HEX ili kuibadilisha na nyingine? Au ugeukie programu ya kikokotoo ambayo haipo kila wakati ili kukokotoa upana wa safu wima kwa kiolezo cha safu wima nyingi?

SASS ina zana unayoweza kutumia ili kukuondolea utaratibu huu. Hizi ni pamoja na vigezo, samaki wa nguruwe, kuota Na urithi wa mteuzi.

Kimsingi, nambari ya SASS ni sawa na CSS, lakini ya msingi kipengele tofauti Moja ambayo inaonekana mara moja ni kutokuwepo kwa semicolon baada ya kila jozi ya thamani ya mali na kutokuwepo kwa braces curly.

Wacha tuchukue kipande kifuatacho cha nambari ya CSS kama mfano:

#tangazo_la_skyscraper
{
kuonyesha: kuzuia;
upana: 120px;
urefu: 600px;
}

#tangazo_la_ubao_wa_waongozi
{
kuonyesha: kuzuia;
upana: 728px;
urefu: 90px;
}

Ambayo ni sawa na SASS hii:

#tangazo_la_skyscraper
kuonyesha: block
upana: 120px
urefu: 600px

#tangazo_la_ubao_wa_waongozi
kuonyesha: block
upana: 728px
urefu: 90px

SASS hutumia nafasi (ujongezo mwanzoni mwa mstari unaofuata) wa nafasi mbili ili kuonyesha kuota kwa vipande vya msimbo. ( *Katika kijisehemu cha mwisho, kwa uwazi, niliangazia nafasi hizi kwa mandharinyuma nyekundu.)

Sasa kwa kuwa tuna wazo la jinsi nambari ya SASS inavyoundwa, wacha tuangalie maswala ambayo hufanya hivyo bora.

Vigezo.

Katika SASS, ili kutangaza kigezo ni lazima utangulie jina lake kwa ishara ya dola $. Na ikiwa jina la utofauti wako ni, sema, red , basi baada ya koloni tunaweza kuonyesha thamani ifuatayo inayolingana nayo:

SASS ina vitendaji vilivyojumuishwa kama giza na nyepesi ambavyo vinaweza kutumika kurekebisha maadili ya aina hizi za anuwai.

Kwa hivyo, katika mfano ufuatao, rangi ya fonti katika aya pia itakuwa nyekundu, lakini nyeusi kuliko ile iliyotumiwa katika vichwa vya h1:

$nyekundu: #FF4848
$fontsize: 12px
h1
rangi: $ nyekundu

uk
rangi: giza($nyekundu, 10%)

Unaweza kufanya shughuli za hesabu na vigeu, kama vile kujumlisha na kutoa, mradi tu thamani zinazotumika ni za aina moja ya data. Ikiwa, kwa mfano, tulitaka kutumia tint nyeusi zaidi, basi tunachohitaji kufanya ni kutoa kutoka kwa thamani ya rangi tayari kutumika katika msimbo, iliyohifadhiwa katika kutofautiana, thamani ndogo ya hexadecimal HEX sawa na, sema, #101 . Vile vile inatumika kwa kesi wakati inahitajika kubadilisha saizi ya fonti, sema, iongeze kwa saizi 10; kwa hili tunaongeza saizi zinazokosekana:

p.kujumlisha_na_kutoa
rangi: $ nyekundu - #101
saizi ya fonti: $fontsize + 10px

Nesting.

Kuna aina mbili za viota katika SASS.

Nesting ya wateuzi.

Hii ndiyo aina ya kwanza ya kutagia, ambayo ni sawa na ile inayotumika Muundo wa HTML kanuni:

$fontsize: 12px

Spika
.jina
fonti:
uzito: ujasiri
ukubwa: $fontsize + 10px
.nafasi
fonti:
ukubwa: $fontsize

Ukiangalia msimbo wa CSS unaosababisha, maoni yoyote hayatakuwa ya lazima. Kwa kuweka darasa la .name ndani ya darasa la .speaker ( *kwa njia sawa - kwa kutumia nafasi mbili mwanzoni mwa mstari unaofuata) kiteuzi cha CSS .speaker.name kimeundwa. Hali hiyo hiyo inatumika kwa jina lifuatalo la darasa .nafasi , inayopatikana baada ya tamko la sifa kwa kiteuzi cha kwanza, ambayo husababisha kuota kwa kiteuzi cha pili .nafasi ya mzungumzaji :

Spika.jina(
font-uzito: ujasiri;
saizi ya fonti: 22px; )
.nafasi.ya mzungumzaji (
ukubwa wa fonti: 12px; )

Nesting ya mali.

Aina ya pili ya kiota hukuruhusu kupanga mali na kiambishi awali kimoja (* fonti-familia , ukubwa wa fonti , uzito wa fonti au mtindo wa mpaka , rangi ya mpaka , radius ya mpaka n.k.):

$fontsize: 12px

Spika
.jina
fonti:
uzito: ujasiri
ukubwa: $fontsize + 10px
.nafasi
fonti:
ukubwa: $fontsize

Katika mfano hapo juu, tunatumia tamko la mzazi, font ya mali ya ulimwengu wote: na kisha kwenye mstari mpya baada ya uingizaji wa nafasi mbili tunaonyesha sehemu ya pili ya mali, ambayo kwa kawaida iko baada ya hyphen.

Hiyo ni, ikiwa tunataja fonti: mali, imewashwa mstari unaofuata baada ya nafasi mbili uzito: mali, basi matokeo yatakuwa sawa na mali inayojulikana ya uzito wa fonti.

Spika.jina(
font-uzito: ujasiri;
saizi ya fonti: 22px; )
.nafasi.ya mzungumzaji (
ukubwa wa fonti: 12px; )

Moduli hutoa usaidizi kwa sifa zote zilizo na hyphen.

Aina hii ya kuweka kiota ni njia nzuri ya kupanga na kupanga msimbo wako wa CSS na kuepuka marudio yasiyo ya lazima. ( *KAUSHA- "Usijirudie" - "Usijirudie." Hali wakati Uumbizaji wa CSS vipengele fulani, mitindo yao hurudiwa na/au kufafanuliwa upya mahali pengine, na kufanya msimbo kuwa mgumu kusoma na kudumisha).

Hagfish.

Kipengele kingine kikubwa cha SASS ni samaki wa nguruwe.

Mchanganyiko hukuruhusu kutumia tena vipande vizima vya nambari ya SASS na hata kupitisha hoja kwao ikiwa ni lazima. Na muhimu zaidi, unaweza pia kutaja maadili yao ya awali.

Ili kufafanua mchanganyiko, tumia kitu kilichohifadhiwa maalum katika SASS neno kuu@mixin , ikifuatiwa na jina la mixin ulilochagua. Ikiwa kuna haja ya hoja, basi ziorodheshe kwenye mabano. Thamani chaguo-msingi za hoja hubainishwa wakati wa kufafanua mchanganyiko, ukitenganishwa na koloni. ( *Kwa maneno mengine, mchanganyiko ni vitendaji vya CSS.)

Utaratibu wa kutumia mchanganyiko ni rahisi sana - baada ya @include neno kuu, taja jina la mchanganyiko unaotaka na uorodhesha vigezo muhimu, ikiwa ni, kwenye mabano.

Angalia mfano ufuatao:

@mixin mpaka-radius($kiasi: 5px) /* fafanua mchanganyiko */
-moz-mpaka-radius: $kiasi
-webkit-mpaka-radius: $kiasi
mpaka-radius: $kiasi

h1 /* tumia mchanganyiko */
@pamoja na radius ya mpaka(2px)

Spika
@ ni pamoja na eneo la mpaka

SASS hii, baada ya kukusanywa, itabadilishwa kuwa msimbo wa CSS hapa chini:

h1 (
-moz-mpaka-radius: 2px;
-radius ya mpaka-webkit: 2px;
mpaka-radius: 2x; )

Spika (
-moz-mpaka-radius: 5px;
-radius ya mpaka-webkit: 5px;
mpaka-radius: 5px; )

Kwa kichwa cha h1 tulibainisha kwa uwazi thamani ya kipenyo cha kona ya mpaka, lakini kwa kipengele kilicho na jina la darasa .spika hatukufanya hivi, kwa hivyo thamani ya chaguo-msingi ya 5px ilichukuliwa.

Urithi wa mteuzi.

Mwingine bora Kipengele cha sintaksia ya SASS ni uwezo wa wateuzi kurithi mitindo yote iliyobainishwa kwa wateule wengine. Ili kuchukua fursa ya kipengele hiki, lazima utumie neno kuu la @extend, likifuatiwa na kiteuzi ambacho ungependa kurithi mali yake:

h1
mpaka: 4px imara #ff9aa9

Spika
@ongeza h1
upana wa mpaka: 2px

Nini kitakusanywa kwa:

h1,.mzungumzaji (
mpaka: 4px imara #ff9aa9; )

Spika (
upana wa mpaka: 2px; )

(*Kumbuka kwamba tamko la mpaka: 4px imara #ff9aa9; hairudiwi ndani ya sheria na kiteuzi cha .spika, lakini badala yake kiteuzi cha pili huongezwa kwa kanuni ya kwanza. Kwa maneno mengine, hakuna kurudia nambari.)

Jaribu SASS kwa vitendo.

Mtandaoni.

Unaweza kutumia SASS mtandaoni bila kusakinisha kwanza moduli kwenye kompyuta yako ya karibu.

Lakini kabla ya kuanza majaribio, chini ya ukurasa, chagua chaguo "Sintaksia Iliyoingizwa".

Imewekwa kwenye PC.

SASS yenyewe ni programu (gem) ya jukwaa la Ruby. Kwa hiyo, ili kuiweka, huwezi kufanya bila kwanza kusakinisha jukwaa yenyewe na meneja wa kifurushi cha lugha hii ya programu RubyGems. Baada ya kufanikiwa kusanidi jukwaa lenyewe na msimamizi, endesha amri ifuatayo kwenye koni:

gem kufunga sass

Moduli ya SASS inaweza kutumika kama zana ya kubadilisha faili zako za SASS kuwa faili za umbizo la CSS katika hali ya mstari wa amri.

Hii inaweza kufanywa, kwa mfano, kwa kuingiza amri ifuatayo:

sass --watch sass_folder:stylesheets_folder

Ambapo sass_folder ni njia ya folda iliyo na faili za SASS (yaani, na kiendelezi cha .sass), na stylesheets_folder ni njia ya folda ambayo faili za CSS zitahifadhiwa baada ya kukusanywa. Amri ya --watch inaiambia moduli kwamba inapaswa kutazama mabadiliko yoyote katika folda iliyobainishwa na, ikiwa yapo, baada ya kuyahifadhi, badilisha faili asili za .sass kuwa faili sawa za .css.

Kubadilisha CSS kwa SAS

Unaweza kuanza kutumia SASS kwa kubadilisha mitindo inayotumika katika miradi yako iliyopo kuwa umbizo hili kwa kutumia matumizi ya "sass-convert".

Ili kufanya hivyo, kwenye mstari wa amri, ingiza njia ya folda ambayo yaliyomo yanahitaji kubadilishwa ( *Hiyo ni, nenda tu kwenye saraka inayotaka ambayo ziko faili za chanzo ) Kisha endesha matumizi yaliyotajwa hapo juu na uipe vigezo vifuatavyo:

sass-badilisha --kutoka css --hadi sass -R.

Ambapo -R bendera inabainisha njia ya kujirudia ya kufanya operesheni. Na hatua inayofuata baada yake. inamaanisha kuwa faili zinazotokana za .sass zitahifadhiwa kwenye saraka ya sasa. ( *Ikiwa ni lazima, badala ya dot, unaweza kutaja njia ya folda ambayo unataka kuhifadhi faili zinazosababisha.)