DokuWiki sasset

sasset:analyzing_installation_options

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T21:05:50+00:00

<- Understanding SassWorking with our automation template -> Ruby -> ruby-lang.org -> Installé par défaut sur Mac OS X -> sass-compatibility.github.io -> windows : rubyinstaller.org SASS -> gem install sass (dans le terminal) -> exemple d'install complète dans Web Project Workflows with Gulp.js, Git and Browserify

sasset:conditional_if_statements_and_argument_lists

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T14:34:04+00:00

<- Using the @content containerLooping through lists with @for -> Créer une mixin qui prend un nombre non déterminé de valeur : @mixin break($args...) { // on ajoute trois point à n'importe quelle variable, cela signifie qu'il s'agira d'une série de valeurs // @mixin break($first, $args...) { // first valeur habituelle, $args série de n valeur @if length($args) == 1 { @media (min-width: nth($args, 1) { @content; } } @else { @media (min-width: nth($args, 1) and (max-width:…

sasset:creating_basic_mixins

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T11:49:37+00:00

<- Using PartialsUsing the @extend method -> Mixins -> “Javascript-like functions” @mixin (:, , ..., >paramètre n>) { :; } @include (, , ..., >paramètre n>); @mixin backImage($image) { background: url($image); } .style { @include backimage('file.png'); }

sasset:creating_list_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T13:35:24+00:00

<- Modifying colorsUsing the @content container -> En CSS on a déjà des listes, par exemple : font-family: Helvetica, 'Nom avec espaces', Arial, sans-serif Ce sont des valeurs séparées par des espaces ou des virgules. -> Attention, les liste ne sont pas 0 based ! -> $roundness: 20px 0 10px 10px; img { border-radius: nth($roundness, 1); // on récupère la première valeur de la liste, soit 20px (rappel : on n'e…

sasset:going_through_a_list_with_each

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T14:50:47+00:00

<- Looping through lists with @forWorking with the map data type -> @each $color-names: 'rouge', 'vert', 'bleu'; $colors: $red, $green, $blue; @each $name in $color-names { $i: index($color-names, $name); // à quel index dans $color-names correspond $name .btn-#{$name} { @extend %btn; background-color: nth($colors, $i); } }

sasset:looping_through_lists_with_for

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T14:42:48+00:00

<- Conditional @if statements and argument listsGoing through a list with @each -> @for permet d'itérer parmi les éléments d'une liste. $colors: $red, $green, $blue; @for $item from 1 through length($colors) { h#{$item} { color: nth($colors, $item); } } -> -> Voir aussi @while dans la doc ci-dessus, un peu différente

sasset:modifying_colors

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T12:33:17+00:00

<- Working with math operationsCreating list elements -> * assombrir (darken) * éclairer (lighten) * complémentaire (complementary) * et bien d'autres -> tr { background-color: $blue; &:hover { background-color: complement($blue); }

sasset:nesting_your_styles

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T23:13:50+00:00

<- Working with variablesUsing Partials -> Nesting .media { padding: 0; .item { padding-top: 10px; } }

sasset:next_steps

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T15:27:54+00:00

<- Working with the map data type -> -> sass-lang.com -> responsive sass and -> Building a Responsive Single-Page Design -> thesassway.com

sasset:referencing_parent_selectors_with

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T11:52:44+00:00

<- Using the @extend methodUsing comments and hidden comments -> & est un sélecteur spécial désignant le parent de l'élément .item { background: white; &:hover { background: red; } } @mixin clearfix { &:before, &:after { content:''; display: table; } &:after { clear:both; } } .item { @include clearfix; }

sasset:understanding_sass

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T21:03:49+00:00

<- Using the exercise filesAnalyzing installation options -> What is SASS * une extensions à CSS * un langage pré-processé * est extensible via des plugins (Compass, ???, Susy) * écrit en Ruby Features * variables * nesting * partials : permet des séparer le CSS en modules * extend : sorte d'héritage, on peut baser un sélecteur sur un autre.

sasset:using_comments_and_hidden_comments

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T12:07:48+00:00

<- Referencing parent selectors with &Working with math operations -> CSS : /* commentaire */ SASS : // commentaire invisible /* commentaire visible */ /*! Commentaire visible même en mode compressé, utile par exemple pour les licences */

sasset:using_partials

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T23:29:06+00:00

<- Nesting your stylesCreating basic mixins -> SASS permet de diviser son code en modules appelés “partials”. On ajoute juste un @import comme en CSS. Les partials sont habituellement signalés par un _ au début du nom de fichier. @import "modules/mon_module.scss" importe modules/_mon_module.scss @import "modules/mon_module" // la même chose @import "normalize.scss"

sasset:using_the_content_container

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T13:48:44+00:00

<- Creating list elementsConditional @if statements and argument lists -> Il est possible, dans les mixins, d'utiliser du sous-code. @mixin break($length) { @media (min-width: $length) { @content; } } .branding { float: left; display: none; @include break(1000px){ display: block; }; } Donne :

sasset:using_the_extend_method

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T11:51:02+00:00

<- Creating basic mixinsReferencing parent selectors with & -> Étendre les fonctionnalités d'une classe avec une autre .style_a { background:red; } .style_b { @extend .style_a; color: black; } .style_c { @extend .style_a; color: blue; } // output : .style_a, .style_b, .style_c { background:red; } .style_b { color: black; } .style_c { color: blue; }

sasset:working_with_math_operations

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T12:19:06+00:00

<- Using comments and hidden commentsModifying colors -> * multiplication * * division / * /!\ attention au dash (-) : élément de nom valide en SASS/CSS -> $qty-1 (nom) != $qty - 1 (opération) @mixin imagegrid($qty, $margin) { width: ((100% - (($qty - 1) * $margin))/$qty) // the dash is a valide name in SASS : $qty-1 (nom) != $qty - 1 (opération) &nth-child(n) { margin-right: $margin; margin-bottom: $margin; } &nth-child(#{$qty}n) { // opérateur #, permet ici d'insérer …

sasset:working_with_our_automation_template

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T22:37:19+00:00

<- Analyzing installation optionsWorking with variables -> -> gulp.js -> Installer la coloration syntaxique pour son éditeur de texte

sasset:working_with_the_map_data_type

Anonymous (anonymous@undisclosed.example.com) — 2016-04-02T14:57:57+00:00

<- Going through a list with @eachNext steps -> Associated Arrays : key/value $color-btns: ( rouge: $red, vert: $green, bleu: $blue, ); @each $key, $value in $color-btns { .btn-#{$key} { @extend %btn; background-color: $value; } }

sasset:working_with_variables

Anonymous (anonymous@undisclosed.example.com) — 2016-03-30T22:51:28+00:00

<- Working with our automation templateNesting your styles -> Variables $blanc: #FFFFFF; $noir: #000000; $color-main: $noir; $color-background: $blanc; $font-main: Georgia, Helvetica, sans-serif; body { font-family: $font-main; }