Ano ang isang SCSS file?

Ang SCSS ay ang pangalawang syntax ng Sass (Syntactically Awesome Stylesheet) na gumagamit ng mga bracket sa halip na mga indentasyon. Ang SCSS ay idinisenyo sa paraang ang isang wastong CSS3 file ay isa ring wastong SCSS file. Ang mga SCSS file ay iniimbak gamit ang .scss extension.

Bakit gagamit ng SCSS

Habang nagiging kumplikado ang mga disenyo ng mga website na nagreresulta sa malalaking CSS na mga file. Ang mga ganitong file ay mas mahirap i-maintain. Dito pumapasok ang SCSS. Ipinapakilala ng SCSS ang mga variable, nesting, mixin, import, at selector inheritance sa CSS development. Ang mga karagdagan na ito ay ginagawang mas masaya ang pagtatrabaho sa disenyo.

Paano gamitin ang mga SCSS file

Ang mga SCSS file ay hindi direktang kasama sa HTML na dokumento tulad ng CSS. Sa halip, ang mga SCSS file ay kino-convert sa mga CSS file na kasama sa mga HTML file. Upang i-install ang SCSS sa iyong system, sundin ang mga tagubiling ibinigay sa Opisyal na Sass Site. Upang i-convert ang SCSS sa CSS, maaari mong i-convert ang isang na-save na SCSS file o manood ng mga pagbabago at i-convert habang ang file ay nai-save. Ang mga utos para sa pareho ay ibinigay sa ibaba.

I-convert Minsan

Ang unang parameter ay ang source SCSS file at ang pangalawang parameter ay ang output CSS file.

sass main.scss main.css

Abangan ang mga Pagbabago

Ang command ay may karagdagang flag na watch* na nagpapanatili sa paggana ng command at sa sandaling ma-save ang SCSS file, mabubuo ang output CSS.

sass --watch main.scss main.css

SCSS Syntax

Sinusuportahan ng SCSS ang mga variable, nesting, mixin, import, selector inheritance, atbp. Ibinigay sa ibaba ang mga halimbawa ng mga feature na ito.

Mga Variable

Sa pamamagitan ng paggamit ng mga variable, maaari kang magtakda ng magagamit na impormasyon tulad ng pangunahing kulay o kulay ng background para sa pindutan ng pag-save. Ito ay kapaki-pakinabang kung kailangan mong baguhin ang impormasyong iyon, babaguhin mo lang ito sa isang lokasyon at ito ay mag-a-update kung saan man ito ginagamit.

SCSS

$primary-color: #47dff0;
$secondary-color: darken($primary-color, 50%);
$margin: 16px;

.highlight {
    border-color: $primary-color;
    color: $secondary-color;
}

h1 {
    span {
        margin: $margin / 2;
    }

    color: $secondary-color;
}

Generated CSS

.highlight {
  border-color: #47dff0;
  color: #042f34;
}

h1 {
  color: #042f34;
}
h1 span {
  margin: 8px;
}

Nesting

Maaari mong i-nest ang mga tagapili ng CSS na katulad ng hierarchy ng HTML. Sa halimbawang ibinigay sa ibaba, ang span ay naka-nest sa loob ng h1 block.

SCSS

$primary-color: #47dff0;
$secondary-color: darken($primary-color, 50%);
$margin: 16px;

.highlight {
    border-color: $primary-color;
    color: $secondary-color;
}

h1 {
    span {
        margin: $margin / 2;
    }

    color: $secondary-color;
}

Generated CSS

.highlight {
  border-color: #47dff0;
  color: #042f34;
}

h1 {
  color: #042f34;
}
h1 span {
  margin: 8px;
}

Mixins

Mixins gamitin ang mga mixin upang pagsama-samahin ang magkatulad na mga katangian na ginagamit nang magkasama sa maraming lugar. Maaari mo ring ipasa ang mga parameter sa mga mixin.

SCSS

Declaring a mixin

// Simple
@mixin error-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid black;
    padding: 10px;
}

// With Parameter
@mixin message-text($color) {
    color: $color;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid black;
    padding: 10px;
}

Using a mixin

.error {
    @include error-text();
}

.success {
    @include message-text(green);
}

.info {
    @include message-text(blue);
}

Generated CSS

.error {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

.success {
  color: green;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

.info {
  color: blue;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid black;
  padding: 10px;
}

Extend

Ang Extend/Inheritance ay kapaki-pakinabang sa mga kaso kung saan ang mga katangian ng isang selector ay kailangang ibahagi sa isa pang selector. Sa halimbawa sa ibaba, kinukuha ng .error-notice selector ang lahat ng property ng .error-text selector at nagdaragdag ng mga katangian ng border at padding.

SCSS

.error-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
}

.error-notice {
    @extend .error-text;
    border: 1px solid black;
    padding: 10px;
}

Generated CSS

.error-text, .error-notice {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

.error-notice {
  border: 1px solid black;
  padding: 10px;
}

Import

Maaaring maging kapaki-pakinabang ang pag-import sa paghihiwalay ng mga alalahanin. Maaari mong hatiin ang mga estilo sa paraang ang mga istilo ng header ay nasa isang hiwalay na file, ang mga estilo ng footer ay nasa isang hiwalay na file, ang lahat ng mga variable ng kulay na ginagamit sa mga estilo ay maaaring nasa isang hiwalay na file, atbp. Gamit ang diskarteng ito, ang mananatiling organisado ang mga istilo. I-import mo lang ang mga file sa iyong pangunahing SCSS file tulad ng ipinapakita sa halimbawa sa ibaba. Hindi mo kailangang tukuyin ang extension ng file sa pagtuturo sa pag-import. Direktang kino-compile ni Sass ang lahat ng SCSS file. Upang maiwasang direktang ma-compile ang mga file sa pag-import, maaari mong gawing partial ang mga ito sa pamamagitan ng pagdaragdag ng underscore(_) bago ang kanilang pangalan. Maaari kang mag-import ng mga partial na katulad ng mga normal na SCSS file nang walang underscore.

SCSS

@import "variables";
@import "header-styles";
@import "footer-styles";

The output CSS will have the styles from all the imported files.

Mga Sanggunian

See Also