[RUBY] Aide-mémoire pour la notation SCSS

À propos de ce contenu

Ce contenu est publié sur le site que j'exécute pour une visualisation plus facile, veuillez donc l'utiliser également. [Sass] Aide-mémoire sur la notation SCSS

Qu'est-ce que la notation SCSS?

La notation SCSS est l'un des styles d'écriture de Sass. Sass a la notation SCSS et la notation SASS, et la notation SCSS est souvent utilisée car elle est compatible avec CSS. L'extension doit être ".scss".

Qu'est-ce que Sass

Abréviation de «Syntactically Awesome Style Sheet», un méta-langage CSS créé par Ruby conçu et développé pour que le CSS puisse être écrit efficacement.

Écriture de base

SCSS

div{
  p{
    color: red;
  }
}

Système de structure imbriquée

Structure imbriquée

Décrit dans une structure imbriquée (comme HTML)

See the Pen Sass_scss_nest by engineerhikaru (@engineerhikaru) on CodePen.

Voir le sélecteur de parent

Décrire en référence au nom du sélecteur parent

See the Pen Sass_scss_parent-reference by engineerhikaru (@engineerhikaru) on CodePen.

Imbrication d'espace de noms

Décrivez ce qui est décrit dans l'espace de noms en CSS (font-family etc.) dans une structure imbriquée

See the Pen Sass_scss_namespace-nest by engineerhikaru (@engineerhikaru) on CodePen.

Système variable

variable

Regrouper les valeurs fréquemment utilisées dans des variables

See the Pen Sass_scss_variable by engineerhikaru (@engineerhikaru) on CodePen.

Variable de tableau

Collectez les valeurs fréquemment utilisées avec des variables de tableau

See the Pen Sass_scss_array-variable by engineerhikaru (@engineerhikaru) on CodePen.

Variables de groupe

Résumer les styles fréquemment utilisés

See the Pen Sass_scss_group-variable by engineerhikaru (@engineerhikaru) on CodePen.

Système d'héritage

importer

Importez le fichier SCSS divisé

SCSS

// basic.Lors de la lecture d'un fichier SCSS appelé scss
@import "basic";

Héritage

Hériter du style utilisé ailleurs

See the Pen Sass_scss_extend by engineerhikaru (@engineerhikaru) on CodePen.

grammaire

Branche conditionnelle

Changer le style en fonction des conditions

See the Pen Sass_scss_if-else by engineerhikaru (@engineerhikaru) on CodePen.

répétition

Répéter le style

See the Pen Sass_scss_for by engineerhikaru (@engineerhikaru) on CodePen.

Répéter (variable de tableau)

Répéter en utilisant des variables de tableau

See the Pen Sass_scss_foreach by engineerhikaru (@engineerhikaru) on CodePen.

Calcul / couleur

Quatre règles

Calculez avec style

See the Pen Sass_scss_calculation by engineerhikaru (@engineerhikaru) on CodePen.

Concaténation de chaînes

Concaténation de chaînes avec style

See the Pen Sass_scss_concatenation by engineerhikaru (@engineerhikaru) on CodePen.

Réglage de la luminosité

Ajuster la luminosité de la couleur de base

See the Pen Sass_scss_brightness by engineerhikaru (@engineerhikaru) on CodePen.

Réglage de la saturation

Ajuster la saturation de la couleur de base

See the Pen vYNVVjr by engineerhikaru (@engineerhikaru) on CodePen.

Réglage de la transparence

Ajuster la transparence de la couleur de base

See the Pen Sass_scss_transparency by engineerhikaru (@engineerhikaru) on CodePen.

Réglage de la teinte

Ajuster la teinte de la couleur de base

See the Pen Sass_scss_hue by engineerhikaru (@engineerhikaru) on CodePen.

Couleur complémentaire et inversion de couleur

Compléter ou inverser la couleur de base

See the Pen Sass_scss_inversion by engineerhikaru (@engineerhikaru) on CodePen.

Mélanger les couleurs

Mélanger les couleurs de base (2)

See the Pen Sass_scss_color-mix by engineerhikaru (@engineerhikaru) on CodePen.

Autre

Commenter

SCSS

//Commentaire d'une ligne
/* 
Commentaire sur plusieurs lignes(Reste après compilation)
*/

Unquoting

Supprimez le guillemet ("") de la chaîne

See the Pen Sass_scss_quote by engineerhikaru (@engineerhikaru) on CodePen.

Minuscules supérieure

Majuscule ou minuscule de la chaîne de caractères

See the Pen Sass_scss_upper-case by engineerhikaru (@engineerhikaru) on CodePen.

Renvoie la valeur absolue

Renvoie la valeur absolue d'un nombre

See the Pen Sass_scss_abs by engineerhikaru (@engineerhikaru) on CodePen.

Retour en haut

Renvoie un arrondi de nombres

See the Pen Sass_scss_ceil by engineerhikaru (@engineerhikaru) on CodePen.

Troncature de retour

Renvoie la troncature des nombres

See the Pen Sass_scss_floor by engineerhikaru (@engineerhikaru) on CodePen.

Renvoie l'arrondi

Renvoie l'arrondi des nombres

See the Pen Sass_scss_round by engineerhikaru (@engineerhikaru) on CodePen.

À propos de ce contenu

Ce contenu est publié sur le site que j'exécute pour une visualisation plus facile, veuillez donc l'utiliser également. [Sass] Aide-mémoire sur la notation SCSS