Technology sharing

scss notiones et usus

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tabula contentorum

quid scss

Comparatio inter scss et css

Usus scss

declarare variables

Differentiam default variables

Distingue inter global variabiles et locales variabiles

Nidificarunt syntaxin

Elector nidificans

basic nidificans

Elector referat parente nested (&)

Nidificans considerations

nested nested

Proprietas nidificans

Basic attributum nidificans

Nidificans considerations

hereditas

Basic usus

Notae de hereditate

Application missiones

Placeholder%

define placeholder

hereditas placeholder

Commoda et applicabiles missiones

Cautiones

Miscere @mixin

Define mix

vocationem misce

exemplum

Commoda et applicabiles missiones

Cautiones

SCSS utitur constitutionibus

@if constitutionis

@else et @else si statements

Nidificans de constitutionibus

finitione

Tria genera ansarum in SCSS

@pro loop

@ Quisque loop

@while loop

Summatim

Consuetudo munera et usus

Define consuetudo munera

Utere consuetudo munera

Cautiones

Duis congue

quid scss

SCSS (Sassy CSS) praeprocessor lingua CSS est. Plura munera praebet et flexibilitatem in CSS fundata, scribendo et administratione styli schedae magis efficacem et commodam faciens.

Hic SCSS sunt aliqua commoda;

  • Variabiles: SCSS permittit usum variabilium ad copia valorum colorum, fontium magnitudinum, etc., ut commodius et sustineri possit ad hos valores uniformiter accommodandi per totum schedam styli.
  • Regulae nested: regulae Nested in SCSS adhiberi possunt ad stylos ordinandos ut structuram codicis clariorem reddant. Exempli gratia, scribere potes stilum pseudo-genus elementi in trunco ​​styli sui parentis elementi loco pluribus in locis scribendo.
  • Mixins: Mixins sunt modus componendi proprietates styli statuti in scandalum reusable. Hoc saepius vitat scribens eiusdem styli codicem atque meliorem codicem reusability et readability.
  • Importare (Inline Imports): Multiplex SCSS fasciculi in unum fasciculum per @import regulam mergi possunt. Aditus hic adiuvat schedam stili in logicales unitates dividere ac molliter disponi ac tractari prout opus est potest.
  • Hereditas (Extende): SCSS sustentat hereditatem stili per @extende keyword, quod potest facere schedam stili magis modulari et conservari.
  • Operationes: SCSS operationes mathematicae in schedae styli permittunt, ut additionem, subtractionem, multiplicationem et divisionem, quae utiles sunt ad tractandas calculi stili dynamici.
  • Modularitas: Proprietates SCSS schedas stilo more modulari et structas efficiunt, quae stylos, praesertim in magnis inceptis, melius administrare et conservare possunt.

In summa, SCSS non solum omnes functiones CSS retinet, sed etiam notas provectas inducit ut variabiles, nidificans, mixtura, importans, etc. Hae functiones permittunt tincidunt scribere et schedas stili stili efficacius scribere et communiter in modernis frontibus usurpari. nis explicatio.

Comparatio inter scss et css

grammaticae;

  • CSS: Basic cascading scheda styli syntaxis, regulae per selectores, attributa et valores definiuntur.
  • SCSS: SCSS est praeprocessor lingua pro CSS. Plura praebet functiones et syntaxin, sicut variabiles, nidos regulas, mixins, importat, etc.

Readability and maintainability:

  • CSS: In amplioribus inceptis, CSS fasciculi valde verbosi et difficile servari possunt quia lineamentis structuris et modulalibus caret.
  • SCSS: SCSS variabiles regulas nidificantes sustinet. Hae notiones faciunt codicem faciliorem et tractabilem. Adhibitis variabilibus et mixinis, scriptura repetita minui potest, et normae nidificatae relationem hierarchicam structurae HTML clarius exprimere possunt.

Munus extensio:

  • CSS: Standard CSS nonnisi principalem stilum definitionem ac electrix congruens facere potest.
  • SCSS: SCSS functiones provectas inducit ut mixtionem, hereditatem et calculas.

convenientia;

  • CSS: navigatores CSS directe sustinent, nulla additamenta compilationi graduum requiruntur.
  • SCSS: SCSS converti debet in normalem CSS fasciculum a compilator antequam cognosci et applicari potest a navigatro.

doctrina curva;

  • CSS: Discere CSS est relative simplex, intelligere fundamentalem compositionem de selectoribus, proprietatibus, et valores.
  • SCSS: Discere SCSS requirit singularem syntaxin et functiones dominari, ut variabiles, mixtiones, nidificantes, etc., quae certam discendi ac adaptationem processum requirit.

Ad summam, cum ordinariis CSS, SCSS plura instrumenta et lineamenta ad simpliciorem scripturam et sustentationem styli schedae praebet, maximeque apta est ad magnorum et multiplicium inceptorum evolutionem. Nihilominus, pro parvis inceptis vel necessitates dicendi simpliciter, planae CSS rectius et commodius esse possunt.

Usus scss

Antequam scss discat, primum duo obturaculum in vscode institue ut scss in ordinarias tabellas CSS convertat pro doctrina sequenti!

Quaere sass in obturaculum in repositorium, duo sequentia obturaculum inicies et vscode sileo!

declarare variables

Declarans variabiles in SCSS valde simplex, symbolo $ uti potes ad variabiles definiendas.

Simplex exemplum hic est demonstrans quomodo variabiles in SCSS declarandi et utendi;

  1. // 定义变量
  2. $primary-color: #3498db;
  3. $secondary-color: #2ecc71;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

In exemplo superiore definivimus duas variabiles $primum-colorem et $secundarium colorem ad condere primum colorem et secundum colorem respective. His variabilibus styli regulis uti possumus, ut colores constantes et faciles in stylo styli mutare possint.

Cum fasciculus SCSS in lima normali CSS compigatur, omnes variabiles cum valoribus suis respondentibus restituentur, ergo fasciculus ultimus generatus CSS nullas declarationes variabiles continebit.

Differentiam default variables

In SCSS, variabilibus defectibus uti potes ut variabilis valorem alternum habeat si non definiatur. Hoc maxime utile est cum operando cum earum stylis vel configurantibus.

Exemplum est hic quomodo declarandi et utendi variabiles defectus:

  1. // 声明变量，并设置默认值
  2. $primary-color: #3498db !default;
  3. $secondary-color: #2ecc71 !default;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

In exemplo superiore usi sumus !default tag ad definiendum valorem default. Id significat, si $ color primus vel secundarius color $ alibi non definitur antequam in fasciculum illum SCSS introducatur, determinatis valoribus default (#3498db et #2ecc71). Si hae variabiles ante tabellam invehentes definitae sunt, valores default ignorabuntur.

Beneficium variabilium default usus est ut sinat te valores alternas pro variabilibus praebere sine overscriptione iam variabilium definitarum. Hoc maxime utile est ad themata creanda vel variabiles per multiplices imaginum formas communicandas.

Distingue inter global variabiles et locales variabiles

  • Global variabiles: Global variabiles variabiles sunt extra electrix vel extra munus turpis. Per ambitum stili styli pervia sunt, et si eadem globalis variabilis in multiplicibus scriniis definitur, valores eorum constantes manebunt.
  • Variabiles locales: variabiles locales variabiles sunt intra electrix vel intra mixtor/munus definitae. Solum adhiberi possunt intra ambitum in quo definiuntur nec amplius valida sunt extra illum locum.

Nota: locales variabiles delendi global variabiles

Cum variabilis idem nomen ac variabilis globalis in locali scopo redeatur, loci variabilis valorem variabilis globalis supra scribit. Hoc permittit variae variabiles valores ut pro certo selectore vel mixto definiantur sine condicione globali afficientes.

Utere !global keyword ut vertere locales variabiles in global variabiles

SCSS providet !global keyword ut explicite declaret variabiles locales variabiles globales. Hoc facit valorem variabilis localis promovendi ad scopos globalis, ubi declaratur, in scribendo aliquas variabiles globales existentes eodem nomine.

Exemplum:

  1. // 全局变量
  2. $primary-color: #3498db;
  3.  
  4. .button {
  5.   // 局部变量，覆盖全局变量
  6.   $primary-color: #cc582e;
  7.   background-color: $primary-color; // 使用局部变量值
  8. }
  9.  
  10. // 使用 !global 将局部变量变为全局变量
  11. $primary-color: #cddb34;
  12.  
  13. .button {
  14.   // 使用 !global 将局部变量变为全局变量
  15.   $primary-color: #2ecc71 !global;
  16. }
  17.  
  18. body {
  19.   background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
  20. }

In primo exemplo, loci variabilis $ color primarius intra .button selector valorem globalis variabilis vincit. In secundo exemplo, utendo !globali keyword, localium variabilium intra .button selectoris convertuntur in variabiles globales, ita afficientes valores variabiles in scopo globali.

Nidificarunt syntaxin

Elector nidificans

basic nidificans

Elector aerarii permittit regulas stili pueri selectores ut selectores parentis intus collocentur, exempli gratia:

  1. // SCSS代码
  2. .navbar {
  3.   background-color: #333;
  4.   padding: 10px;
  5.  
  6.   ul {
  7.     list-style: none;
  8.     margin: 0;
  9.     padding: 0;
  10.  
  11.     li {
  12.       display: inline-block;
  13.       margin-right: 10px;
  14.  
  15.       a {
  16.         text-decoration: none;
  17.         color: #fff;
  18.  
  19.         &:hover {
  20.           text-decoration: underline;
  21.         }
  22.       }
  23.     }
  24.   }
  25. }

In superiore codice, .navbar selector ul, li et sub-selector continet nidos. Haec nidificans structura stili regulas clarius et facilius administrare facit.

Elector referat parente nested (&)

In SCSS, signum & symbolum refertur ad electorem parentis, maxime utilem in rebus pseudo-classibus vel pseudo-elementis. Exempli gratia, usus &: tabernus ad referendum scriptorem selectorem parentis hodierni et adde : stylum civitatis tabernus.

  1. .button {
  2.   background-color: #3498db;
  3.   color: #fff;
  4.   padding: 8px 16px;
  5.   border: none;
  6.   text-align: center;
  7.   text-decoration: none;
  8.   display: inline-block;
  9.  
  10.   &:hover {
  11.     background-color: #2980b9;
  12.   }
  13. }

Nidificans considerations
  • Elector profunditatem: Lectorem nimis altum cave nidificans, ut prioritatem styli augeat, faciens stilum vincit et sustentationem difficilem.
  • Facibilitatem: Cum electrix nidificans utens, operam da ut codicem lectuabilem et clarum servando, et nimis implicatas structuras nidificando vites.
  • Euismod: Nested structurae amplitudinem file CSS generati augere possunt, sed plerumque optimized sunt cum propria institutione et scribendi stilo.
nested nested

SCSS plures gradus selectoris nidificandi concedit, exempli gratia:

  1. .container {
  2.   .row {
  3.     .col {
  4.       width: 100%;
  5.     }
  6.   }
  7. }

Proprietas nidificans

In SCSS, praeter selectorem nidificationem, notum est etiam nidificandi attributi, quae alia notatio est quae stylos stylos mundiores et facilius ad administrandum facit. Proprietas nidificans proprietates cognatas permittit simul componi, sicut formae obiecti.

Basic attributum nidificans

Proprietas nidificandi adhiberi potest ad proprietates relatas intra truncum codicis collocare, exempli gratia:

  1. .navbar {
  2.   font: {
  3.     family: Arial, sans-serif;
  4.     size: 16px;
  5.     weight: bold;
  6.   }
  7.   margin: {
  8.     top: 10px;
  9.     bottom: 15px;
  10.   }
  11.   padding: {
  12.     left: 20px;
  13.     right: 20px;
  14.   }
  15. }

In superiori exemplo font, margo, stipites et truncos cognata continent attributa. Haec institutio proprietates clariores et facilius in unoquoque stipite modificandi et conservandi facit.

Nidificans considerations
  • Subnixa possessiones: Non omnes possessiones CSS nidificantes sustinent, plerumque illae quae paria clavem pretii accipere possunt, ut font, margo, color, margo, etc.
  • Leadabilitas: Cum usus attributorum nidificandi, promptitudinem et claritatem codicis invigilet et nimias nidificandi et multiplices structuras evitet.
  • Nidificantes nidificantes: alias proprietates in nidis proprietatis nidificare potes, quae stilos tuos ulterius instituere ac formare possunt.

hereditas

In SCSS, hereditas (Extende) perutilis notam est quae unum selectorem ad regulam alterius selectoris hereditare permittit. Haec factura duplicatam CSS codicem reducit et stylos modulos magis ac faciliores reddit.

Basic usus

Hereditas electrix fieri potest utendo keyword extendendo. Exempli gratia:

  1. %message-shared {
  2.   border: 1px solid #ccc;
  3.   padding: 10px;
  4.   color: #333;
  5. }
  6.  
  7. .success-message {
  8.   @extend %message-shared;
  9.   background-color: lightgreen;
  10. }
  11.  
  12. .error-message {
  13.   @extend %message-shared;
  14.   background-color: lightcoral;
  15. }

In superiori exemplo, %nuntius communis est selector qui communem rationem stylorum definit. .success-nuntius et .error-nuntius respective stylum %nuntii communicatum possident et suum colorum colorum addunt.

Notae de hereditate

  • Ordo selector: Hereditas numerum selectorum longum generare potest, qui prioritatem styli afficit. Fac ut selectorum ordo et situs verum sit, cum usus @extendit ad vitandas quaestiones necessarias prioritas.
  • Restrictio: Electores haereditates apparere debent electo hereditario. Hoc significat, si electorem in SCSS fasciculo definias et @extendes ut in subsequenti codice stilum suum possideas, haec hereditas tantum effectum habebit postquam definitum est.
  • Placeholder selectores nobis selectores class: Placeholder selectores incipientes e% plerumque meliores sunt scuta hereditatis quam selectores directi ordinis quia selectores post compilationem non generant redundantem. Classis selecta, contra, genera duplicata ubique adhibentur, augentes magnitudinem et implicationem.

Application missiones

Hereditas apprime convenit selectoribus cum notis communibus, ut membra globuli, nuntius cippi, etc. Per hereditatem, eundem stilum in diversis missionibus regulas reicere potes, dum codicem tuum purum et sustinebilem servans.

Ad summam, hereditas in SCSS instrumentum potens est quod duplicationem stili evitare potest et modulari- tatem et claritatem codicis tui servare uti placeholders.

Placeholder%

Locus possessor % est specialis selector in SCSS qui saepe ad regulas stili definiendas quae hereditari possunt sed actu CSS output non generant. In specie:

define placeholder

  1. %placeholder-selector {
  2.   // 样式规则
  3. }

In exemplo superiore, % placeholder-selector est selector incipiens a %. Statuto styli regulas definit, sed nomen selectoris respondentis non apparebit in CSS compilatis.

hereditas placeholder

  1. .some-class {
  2.   @extend %placeholder-selector;
  3.   // 可选的额外样式
  4. }

Usura @extendere keyword permittit .some-classis ut hereditate capiat modum %placeholder-selectoris. Hoc significat quod quaedam classis applicabit omnes regulas styli definitas in % placeholder-selectoris et generatim respondentem CSS output.

Commoda et applicabiles missiones

  • Reducere duplicationem: Placeholder selectores facere posse definire regulas communes stili et eas per hereditatem reuse, cum opus fuerit, codicem duplicationem vitando.
  • Modularitas: Placeholder selectores ad codicem conferunt modulari- tatem et conservabilitatem, praesertim in magnis inceptis, et styli styli claritatem structuralem emendare possunt.
  • Fuge nugationem: Comparatus cum selectoribus classibus, selectores placeholder non generant selectores redundantes, ita magnitudinem imaginum CSS minuentes.

Cautiones

  • Ordo et positio: Cum usus @extendat ad possessorem selectorum locum possessorem, locatoris hereditarii electrix definiri debet antequam eius electrix adhibetur, aliter inopinati styli hierarchiae difficultates evenire possunt.
  • Mixtio: Placetentorem selectorum ponere potes cum selectoribus ordinariis ordinis, sed diligenter eos tractare debes ne inopinatum CSS output.

In summa, % delectator selector instrumentum potens est in SCSS quae tincidunt adiuvari potest emendare reusability et conservabilitas styli schedae dum superfluum CSS redundantiam minuunt.

Miscere @mixin

Mixins sunt alia nota validissima in SCSS quae styli regulas encapsulare patiuntur in codice reusable ac deinde ubicunque opus fuerit. Dissimile delector%, mixins directe potest generare CSS output, ita aptum est ad eas casus ubi idem stilus in pluribus locis uti debet.

Define mix

  1. @mixin mixin-name($parameter1, $parameter2, ...) {
  2.   // 样式规则使用参数
  3. }

In specimine supra, vox @mixin keyword mixin nomine mixin definit nomen qui plures rationes (si opus fuerit) accipere potest et in eo regulas elocutionis definitas definit.

vocationem misce

  1. .some-class {
  2.   @include mixin-name(value1, value2, ...);
  3.   // 可选的额外样式
  4. }

Utere @include keyword ut mixin in electrix vocare et parametris ad eam transire. Hoc modo, .alius-classis regulas stili in mixin definitas applicabit et latas valores parametri congruentibus parametri variabilibus applicabit.

exemplum

  1. @mixin button-style($background-color, $text-color) {
  2.   display: inline-block;
  3.   padding: 10px 20px;
  4.   border: none;
  5.   border-radius: 4px;
  6.   background-color: $background-color;
  7.   color: $text-color;
  8.   text-align: center;
  9.   text-decoration: none;
  10.   font-size: 16px;
  11.   cursor: pointer;
  12.   transition: background-color 0.3s ease;
  13.  
  14.   &:hover {
  15.     background-color: darken($background-color, 10%);
  16.   }
  17. }
  18. .button-primary {
  19.   @include button-style(#3498db, #fff);
  20. }
  21.  
  22. .button-secondary {
  23.   @include button-style(#2ecc71, #fff);
  24. }

 

Commoda et applicabiles missiones

  • Flexibilitas: Commistio parametris permittit ut transeant et diversi stili outputes dynamice generari possint ut opus sit, faciens stilum flexibilem et customizabilem.
  • Readability: Encapsulans in mixin regulas styli communiter adhibitas emendare potest promptitudinem et conservationem codicis tui, praesertim si idem stylus in pluribus locis requiratur.
  • Reusability: Eadem mix dici potest multiplex temporibus in diversis selectoribus et fasciculis ad vitandam stylorum definitionem repetitam et quantitatem codicis minuendam.

Cautiones

  • Certamina nominans: Perficite ut mixins cum nominibus classis CSS existentibus non repugnantibus vel aliis mixinis ad vitandum stilum inopinatum vincit vel errores.
  • Parameter transitum: Cum mixin vocant, curare ut moduli genera et ordo praeterierint, consentaneum est cum requisitis definitionis mixin ad vitandos errores compilationem vel mores inopinatos.
  • Effectus euismod: Extensivus usus mixins augere potest magnitudinem imaginum consequentium CSS, ita utere cautione cum effectu ictum.

In summa, mix @mixin instrumentum potens est ad regulas encapsulantes et reusing stili in SCSS. Potest signanter emendare conservabilitatem et flexibilitatem CSS et aptum est variis implicatis et repetitis styli requisitis.

SCSS utitur constitutionibus

In SCSS enuntiationes conditionales sinunt CSS genera dynamice generari sub certis condicionibus. Conditionales constitutiones in SCSS similes sunt constitutionibus conditionalibus in aliis programmandis linguis, in iis @if, @alse si, et @else.

@if constitutionis

@if enuntiatio permittit genera generari secundum conditionem. Syntaxis talis est:

  1. $use-rounded-corners: true;
  2.  
  3. .button {
  4.   @if $use-rounded-corners {
  5.     border-radius: 4px;
  6.   }
  7. }

In superiori exemplo, si valor usus $ angulis rotundatis variabilis verus est, stylus .button classis generatur, incluso limite-radii: 4px ;. Si falsa conditio est, haec pars elocutionis non generabitur.

@else et @else si statements

Praeter @if, uti potes etiam @aliud si et @aliud plus condicionalibus ramis addere.

  1. $button-size: medium;
  2.  
  3. .button {
  4.   @if $button-size == small {
  5.     padding: 5px 10px;
  6.   } @else if $button-size == medium {
  7.     padding: 10px 25px;
  8.   } @else if $button-size == large {
  9.     padding: 15px 30px;
  10.   } @else {
  11.     padding: 10px 20px; // 默认值
  12.   }
  13. }

In hoc exemplo, secundum valorem variabilis $button-magnitudinis, variae notae valores .button classi applicandae sunt. Si conditio nulla adaptata, signum in @else inusitatus exsecutioni mandabitur.

Nidificans de constitutionibus

Conditionales constitutiones etiam collocari possunt ad logicam magis implicatam tractandam.

  1. $button-style: flat;
  2. $button-size: medium;
  3.  
  4. .button {
  5.   @if $button-style == flat {
  6.     background-color: transparent;
  7.     color: #333;
  8.     border: 1px solid #333;
  9.  
  10.     @if $button-size == small {
  11.       padding: 5px 10px;
  12.     } @else if $button-size == medium {
  13.       padding: 10px 25px;
  14.     } @else if $button-size == large {
  15.       padding: 15px 30px;
  16.     } @else {
  17.       padding: 10px 20px; // 默认值
  18.     }
  19.   } @else if $button-style == raised {
  20.     background-color: #3498db;
  21.     color: #fff;
  22.     padding: 10px 20px;
  23.     border-radius: 4px;
  24.   } @else {
  25.     // 默认样式
  26.     background-color: #db6334;
  27.     color: #fff;
  28.     padding: 10px 20px;
  29.   }
  30. }

In hoc exemplo, variae styli species eliguntur ut in valoribus $button-styli et $button-magnitudinis apponantur. Aditus hic nestedos efficit ut multiplices regulas in multiplicibus condicionibus generare possit.

finitione

Adhibitis conditionalibus sententiis, flexibiliorem et dynamicam definitionem in SCSS consequi potes, et regulas CSS diversas in diversis condicionibus generare, ita conservabilitatem et scalam styli styli meliori.

Tria genera ansarum in SCSS

In SCSS tria principalia sunt constructus loopum qui CSS regulas repetitas generare possunt: ​​@pro, @a singulis, et @dum.

@pro loop

Pro fascia identidem generare stylos secundum certas gradus et conditiones adhibetur.

basic grammatica：

  1. @for $i from <start> through <end> {
  2.   // 循环体
  3. }
  • e*<start> per<end> : Specificare valorem initium et finem valorem ansa (including the end value).
  • Variabilis $i in corpore ansa adhiberi potest ad valorem indicem ansam currentis repraesentandam.

Exemplum：

  1. @for $i from 1 through 3 {
  2.   .item-#{$i} {
  3.     width: 100px * $i;
  4.   }
  5. }

In superiore exemplo generantur tria genera .item-1, item-2 et item-3, cum inflexionibus respective ad 100px, 200px et 300px.

@ Quisque loop

In unaquaque ansa adhibetur ad album vel tabulam percurrere notitias generis et genera pro singulis elementis generare.

basic grammatica：

  1. @each $var in <list or map> {
  2.   // 循环体
  3. }
  • $var: variabilis ansa currentis repraesentat.
  • <list or map>: album esse potest (ut $ album: item1, item2, item3) vel tabula (clavis pretii par).

Exemplum：

  1. $colors: (red, green, blue);
  2.  
  3. @each $color in $colors {
  4.   .text-#{$color} {
  5.     color: $color;
  6.   }
  7. }

 

In hoc exemplo generantur tres classes .text-rubrum, .text-viride et caeruleo-textu-hyacintho, eorumque colores textui positi sunt ad valorum colorum respondentium.

@while loop

The @dum fascias saepe generat stilos sub condicione usque dum conditio non occurrit.

basic grammatica：

  1. $i: 1;
  2. @while $i < 4 {
  3.   // 循环体
  4.   $i: $i + 1; // 更新条件
  5. }
  • $i: quasi ansa contra vel conditio variabilis.
  • Quodlibet codicem SCSS exsecutioni mandari potest in corpore ansa. Fere, conditio variabilis in fine ansae corporis debet renovari ad vitanda ansas infinitas.

Exemplum：

  1. $i: 1;
  2. @while $i < 4 {
  3.   .item-#{$i} {
  4.     width: 100px * $i;
  5.   }
  6.   $i: $i + 1;
  7. }

In hoc codice tria genera generat .item-1, item-2 et item-3, earumque inversationes ad 100px, 200px et 300px respective.

Summatim

Tres SCSS structurae ansa @nam, @singula et @dum adhibentur ad ansam per indicem, percurrendo indicem seu tabulam datam speciei, et generant stilos sub condicione loramenta respective. Hae structurae ansae structurae SCSS potentiores et flexibiles efficiunt, ut multiplices CSS regulas secundum necessitates generare possint.

Consuetudo munera et usus

In SCSS, schedae stili augeri possunt cum functionibus consuetis quae parametri accipiunt et valores processionaliter recipiunt.

Define consuetudo munera

In SCSS, keyword functioni uti ad functiones definiendas, quae parametros habere et valores reddere possunt. Exempli gratia: munus definimus ad exemplar totius arcae latitudinem elementi computare;

  1. @function total-width($padding, $border, $margin, $content-width) {
  2.   @return $padding + $border + $margin + $content-width;
  3. }

In exemplo supradicto:

  • total-latitudo muneris nomen est.
  • Munus quattuor parametri accipit: $padding, $terminus, $margo, $contentus latitudo.
  • Quod @return dicitur reddere rationem pretii.

Utere consuetudo munera

Functio definita, in stylis adhiberi potest ad valores requisitos computare et generare. Exempli gratia:

  1. .element {
  2.   width: total-width(10px, 1px, 5px, 100px);
  3. }

 

In hoc exemplo, munus totum amplitudinis cum parametris 10px, 1px, 5px et 100px vocabitur. Effectus redditus per munus (116px) applicabitur ad latitudinem proprietatis elementi.

Cautiones

  • Munera in quolibet fasciculo SCSS includi possunt et sicut aliae regulae styli formari et importari possunt.
  • Omnia SCSS lineamenta, qualia sunt enuntiata regere (ut @if, @pro, @a singulis, @dum) et in functionibus constructa, in functionibus adhiberi possunt.
  • Munus parametri esse possunt quaelibet SCSS notitia generis, inter numeros, chordas, colores etc.

Duis congue

Utere SCSS ad commutandum thema nigrum et album paginae

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="main.css">
  7.   <title>黑白色主题切换</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <button id="theme-toggle">切换主题</button>
  12.     <div class="box">
  13.       <div class="content">
  14.         <p>这是一些文本内容。</p>
  15.         <p>这是一些文本内容。</p>
  16.         <p>这是一些文本内容。</p>
  17.         <p>这是一些文本内容。</p>
  18.         <p>这是一些文本内容。</p>
  19.         <p>这是一些文本内容。</p>
  20.         <p>这是一些文本内容。</p>
  21.       </div>
  22.     </div>
  23.   </div>
  24.  
  25.   <script src="main.js"></script>
  26. </body>
  27. </html>

scss

  1. // 定义轻主题的样式变量
  2. $light-theme: (
  3.   background-color: white,
  4.   text-color: black,
  5.   highlight-color: #f0f0f0
  6. );
  7.  
  8. // 定义暗主题的样式变量
  9. $dark-theme: (
  10.   background-color: black,
  11.   text-color: white,
  12.   highlight-color: #333333
  13. );
  14.  
  15. // 定义一个混合（mixin）来应用主题样式
  16. // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
  17. @mixin theme($theme) {
  18.   background-color: map-get($theme, background-color);
  19.   color: map-get($theme, text-color);
  20.  
  21.   // 为 .box 类应用主题的高亮颜色
  22.   .box {
  23.     background-color: map-get($theme, highlight-color);
  24.   }
  25. }
  26.  
  27. // 应用轻主题样式到 body 元素，并添加过渡效果
  28. body {
  29.   @include theme($light-theme);
  30.   transition: all 0.3s ease;
  31. }
  32.  
  33. // 为 body 的 dark 类应用暗主题样式
  34. body.dark {
  35.   @include theme($dark-theme);
  36. }
  37.  
  38. // 设置容器的文本居中和顶部间距
  39. .container {
  40.   text-align: center;
  41.   margin-top: 20px;
  42. }
  43.  
  44. // 配置主题切换按钮的样式
  45. #theme-toggle {
  46.   padding: 10px 20px;
  47.   cursor: pointer;
  48.   border: none;
  49.   outline: none;
  50.   background-color: #007bff;
  51.   color: white;
  52.   font-size: 16px;
  53.   border-radius: 5px;
  54. }
  55.  
  56. // 鼠标悬停在主题切换按钮上时改变背景色
  57. #theme-toggle:hover {
  58.   background-color: #0056b3;
  59. }
  60.  
  61. // 定义 .box 类的基本样式和过渡效果
  62. .box {
  63.   margin: 20px auto;
  64.   padding: 20px;
  65.   width: 50%;
  66.   border: 1px solid #ccc;
  67.   transition: all 0.3s ease;
  68.  
  69.   // 内容区域的样式配置
  70.   .content {
  71.     p {
  72.       margin: 10px 0;
  73.     }
  74.   }
  75. }

js

  1. /**
  2.  * 为主题切换按钮添加点击事件监听器
  3.  * 当按钮被点击时，切换文档主体的黑暗主题样式
  4.  * 
  5.  * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
  6.  * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
  7.  * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
  8.  */
  9. document.getElementById('theme-toggle').addEventListener('click', () => {
  10.   document.body.classList.toggle('dark');
  11. });

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones in technologia progressus ad futuram referentiam

mihi contactus notitia

Mail