Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Użycie Sass

...

O Sass

Sass is the acronym for jest akronimem dla "Syntactically Awesome Style Sheets". It is a language that you can use to build your CSS files.
While remaining CSS3-compatible, it brings a lot of features that make it easier to create consistent CSS rules with less work, most notably less copy-pasting: nesting, variables, classes, control directives (if, for, each, while), etc.
To achieve this, Sass requires the use of a preprocessors: it turns your Sass files into CSS files that all browsers can read.

Sass has two syntaxes it can use:

...

Jest to język, który możesz użyć do budowy swoich plików CSS.
Pozostając kompatybilny z CSS3, Przynosi wiele funkcji, które ułatwiają tworzenie spójnych reguł CSS, z mniejszą ilością potrzebnej pracy,przede wszystkim mniej kopiowania - wklejania, zagnieżdżanie jednej rzecz w drugą, zmiennych, klas, dyrektyw kontrolnych, (jeśli, dla, dla każdego, podczas), etc.
Żeby to osiągnąć, Sass wymaga użycia preprocesorów:Zmienia twoje pliki Sass na pliki CSS, tak że wszystkie przeglądarki potrafią je czytać.

Sass ma dwie składnie które można użyć:

  • SCSS składnia, albo "Sassy CSS":
    • The newer syntax, and the one PrestaShop uses.
    • Files use the .scss extension.
    • Can use semicolons and parenthesis.
    • Extension of Nowsz składnia, i PrestaShop używa.
    • Pliki używają rozszerzenia .scss.
    • Można użyć średniko i nawiasów.
    • Rozszerzenie o CSS3.
  • SASS syntaxskładnia, or albo "indented syntaxwcięte składnie":
    • Older syntax, less used.
    • Files use the .sass extension.
    • Relies on tab indentation, just as in Python.
    • No semicolon, no parenthesis.
    • Properties must start with a newline.

...

    • Starsza składnia, jest rzadziej używana.
    • Pliki używają rozszerzenia .sass .
    • Opiera się na zakładce, wcięć podobnie jak Python..
    • Bez średników, bez nawiasów
    • Właściwości muszą się zaczynać od nowej lini

Mozesz zobaczyć różnice pomiędzy dwoma składniami tutaj:

Code Block
titleSCSS syntax
h1 {color: #000; background: #fff}
Code Block
titleSASS syntax
h1
  color: #000
  background: #fff

...

Instalacja

Sass (and Compass in the first place, see below) require the installation of the Ruby language on your machine.Here are some installersi Compass na pierwszym miejscu, zobacz poniżej) wymaga instalacji języka Ruby na twoim urządzeniu.

Oto niektózy instalatorzy:

  • Windows: Download Pobierz http://rubyinstaller.org/ and launch it i uruchom.
  • Mac OS X: Install zainstaluj Homebrew (http://brew.sh/), then type następnie wpisz "brew install ruby".
  • Linux systems: In the command line, type w wierszu polecenia wpisz "sudo apt-get install ruby1.9.1".

Once Ruby is installed on your machine, install Compass – which will in turn install Sass. Go to your Ruby command line and type Jeśli Ruby jest zainstalowany na twoim urządzeniu, zainstaluj Comapass – co z kolei instaluje Sass. Przejdź do wiersza polecenia Ruby i wpisz "gem install compass".

Starting a project project

You are now ready to create your first project:

...

Rozpoczęcie projektowania projektu

Jesteś teraz gotowy do stworzenia swojego pierwszego projektu:

  1. Przejdź do /themes na swoim lokalnym folderze instalacji PrestaShop.
  2. Otwórz w Ruby okno wiersza polecenia dla folderu i wpisz w "compass create".
    Compass will automatically detect or create the config.rb configuration file that is necessary for the compilation of your project.

...

  1. automatycznie wykryje lub utworzy plik konfiguracyjny  config.rb który jest niezbędny do konfiguracji pliku i skompilacji dla twojego projektu.

Aby mieć pewność, że plik .scss będzie automatycznie skompilowany, możesz wpisać komendę w Ruby: "compass watch".

Not a command line fan?

If you would rather not spend your time in the command line, Scout is the cross-platform application for you: it is a self-contained Ruby environment that gives you easy access to Compass and Sass.

...

Nie jesteś fanem wiersza poleceń?

Jeśli nie chcesz spędzić swojego czasu nad wierszem poleceń, Scout to aplikacja wielkoplatformowa dla Ciebie:To jest samowystarczalne środowisko Ruby, który daje łatwy dostęp do Compass i Sass.

Pobierz to tutaj: http://mhs.github.io/scout-app/

After you have installed it, you must:

  1. Create your project at the root of your theme's folder.
  2. Indicate the folder of your .scss files (Input folder).
  3. Indicate the folder for your CSS files (Output folder).

Sass syntax

Comments

There are two ways to add a comment to a Sass file.

The first one enables you to add comments without having them used in the final CSS file:Po zainstalowaniu go należy:

  1. Stwórz projekt w katologu głównym w folderze Twojego motywu..
  2. Wskaż folder w plikach.scss (folder wejściowy).
  3. Wskaż folder dla plików CSS (folder wyjściowy).

Ścieżka Sass

Komentarze 

Istnieją dwa sposoby,aby dodać komentarz do pliku Sass.

Pierwszy z nich pozwala na dodawanie komentarzy bez konieczności ich zastosowania w końcowym pliku CSS. 

Code Block
// This comment is not used in the CSS file.
a { color: green; }

The second one uses the regular CSS syntax, and enables you to add comments that WILL be used in the final CSS fileDrugi używa zwykłej składni CSS i umożliwia dodawanie komentarzy, które zostaną wykorzystane w ostatecznym pliku CSS:

Code Block
/* This comment is used in the CSS file. */
a { color: green; }

Nesting

...

Zagnieżdżanie 

Powala Tobie na blokach gniazda, określenie zasad, które mają zastosowanie tylko w obrębie tego selektora: 

Code Block
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

ResultRezultat:

Code Block
nav ul {margin: 0; padding: 0; list-style: none;}
nav li {display: inline-block;}
nav a {display: block;  padding: 6px 12px; text-decoration: none;}

Parent selector

...

Selektor nadrzędny 

Sass pozwala odwoływać się do selektora nadrzędnego w zagnieżdźonym bloku korzystając z &:

Code Block
 a {
   font-weight: bold ;
   &:hover{
     color: red ;
   }
   li & {
     font-weight: normal; 
  }
 }

ResultRezultat:

Code Block
a {font-weight: bold ;}
a:hover {color: red ;}
li a {font-weight: normal;}

Namespace properties

CSS can use namespace-like properties, such as font-family, font-size, etc.

...

Właściwości przestrzeni nazw.

CSS może użyć przestrzeni nazw podobnie jak czcionka family, rozmiar czcionki etc.

Można użyć do wskazania właściwości zagnieżdżania w ramach danej "nazwy":

Code Block
p {
  font: {
    family: arial;
    size: 1.1em;
    weight: bold;
  }
}

ResultRezultat:

Code Block
p {
  font-family: arial;
  font-size: 1.1em;
  font-weight: bold; 
}

Formaty wyjściowe CSS

...

Sass allows 4 different kind of generated pozwala na 4 róźne rodzaje generowania CSS.

Nested formatFormat zagnieźdźenia:

Code Block
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

Expanded Rozszerzony format:

Code Block
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

Compact Kompaktowy format:

Code Block
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

Compressed formatFormat sprężony:

Code Block
#main{color:#fff;background-color:#000}#main p{width:10em}

SassScript

Sass can make use of a scripting language called SassScript. It makes it possible to use variables, calculation and additional functions. It can be used for any property value.

Variables

Variables must be defined with the $ prefixmoże skorzystać z języka skryptowego o nazwie SassScript. To sprawia, że możliwe jest użycie zmiennych obliczeń i dodatkowe funkcje. Może być stosowany do dowolnej wartości nieruchomości.

Zmienne 

Zmienne muszą być określane przez prefiks $:

Code Block
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}
.border {
  padding: $margin/2;
  margin: $margin/2;
  border-color: $blue;
}

...

Code Block
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Operators

Your SCSS files can directly use calculations and comparators:

...

  • percentage($value) - Converts a unitless number to a percentage.

  • round($value) - Rounds a number to the nearest whole number.

  • ceil($value) - Rounds a number up to the next whole number.

  • floor($value) - Rounds a number down to the previous whole number.

  • abs($value) - Returns the absolute value of a number.

  • min($numbers...) - Finds the minimum of several numbers.

  • max($numbers...) - Finds the maximum of several numbers.

Lists

Sass uses lists for values such as margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif.

...

  • length($list) - Returns the length of a list.

  • nth($list, $n) - Returns a specific item in a list.

  • join($list1, $list2, [$separator]) - Joins together two lists into one.

  • append($list1, $val, [$separator]) - Appends a single value onto the end of a list.

  • zip($lists...) - Combines several lists into a single multidimensional list.

  • index($list, $value) - Returns the position of a value within a list.

The @ directives

Sass supports all of CSS3's @ rules, and adds a few more features such as:

  • Control directives for the CSS compilation.
  • Use of mixins.

@import

You can create files that contain the Sass instructions that you can include in other files.
These "imported" files must have an underscore ("_") at the beginning of their names so as to not be directly compiled into CSS.

...

Code Block
/* global.scss */
#main {
  // imports _example.scss
  @import "example"; 
}

@mixin

Mixins make it possible to group CSS properties that you can reuse as many times as necessary. They can even include other mixins.

...

Code Block
.colors {
  background-color: blue; 
  color: white;
  border-color: blue;
}

@media

Sass allows the nesting of definition blocks from a @media directive.

...

Code Block
.sidebar {width: 300px; }
@media screen and (orientation: landscape) {
  .sidebar {width: 500px; } 
}
@media screen and (orientation: landscape) {
  .sidebar {width: 500px; } 
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .my_sidebar {width: 500px; } 
}

@extend

Inheritance makes it possible to import styles from one CSS selector to another.

...

Code Block
.error {
  border: 1px #f00;
  background-color: #fdd;
}
@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

@warn and @debug

Two directives can help you debug your Sass files:

...

Code Block
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

Control instructions: @if,@for, @each,@while

These instructions are mainly used in mixins of Sass libraries such as Compass.

...

Code Block
p {color: green;}
.item-1 {width: 2em;}
.item-2 {width: 4em;}
.item-3 {width: 6em;}
.puma-icon {background-image: url('/images/puma.png');}
.sea-slug-icon {background-image: url('/images/sea-slug.png');}
.egret-icon {background-image: url('/images/egret.png');}
.salamander-icon {background-image: url('/images/salamander.png');}
.item-6 {width: 12em;}
.item-4 {width: 8em;}
.item-2 {width: 4em;}

@function

You can create your own functions and use it within your files. Just make sure that its name does not conflict with the evolution of Sass and Compass.

...