[Share] SASS Cheat Sheet dùng viết css cực nhanh

Một vài SASS Cheat Sheet đơn giản giới thiệu đến các bạn

SASS là gì?

Về SASS là gì thì mình không giới thiệu lại nữa vì có nhiều bài viết trên mạng đã giới thiệu về nó rồi, các bạn có thể tham khảo tài liệu tiếng anh chính thống tại đây.

SASS là một CSS Prepocessor (như LESS) giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.
– Thạch Phạm

Về cơ bản các bạn có thể hình dung SASS sẽ giúp viết CSS như một ngôn ngữ lập trình. Do đó, để có thể chạy được SASS cần phải có trình biên dịch. Ví dụ:

Windows: Có thể sử dụng Compass, Koala, Prepros
MacOS: CodeKit

Các trình biên dịch này sẽ thực hiện “dịch” tập tin SASS ra file CSS để đưa lên web và dùng bình thường.
Trong bài này mình chia sẻ cho các bạn tập cú pháp viết nhanh trong SASS giúp các bạn tiện tra cứu trong quá trình viết code.

Sass & Gulp

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sassGlob = require('gulp-sass-glob'),
    postcss = require('gulp-postcss'),
    cssnano = require('gulp-cssnano'),
    extReplace = require('gulp-ext-replace');

gulp.task('sass', function() {

  return gulp.src('sass/site.scss')
    .pipe(sassGlob())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'))
    .pipe(postcss([
      require('autoprefixer')({
        browsers: ['> 1%'],
        cascade: false
      })
    ]))
    .pipe(cssnano())
    .pipe(extReplace('.min.css'))
    .pipe(gulp.dest('css'));

});

var gulp = require('gulp'),

sass = require('gulp-sass'),

sassGlob = require('gulp-sass-glob'),

postcss = require('gulp-postcss'),

cssnano = require('gulp-cssnano'),

extReplace = require('gulp-ext-replace');

gulp.task('sass', function() {

return gulp.src('sass/site.scss')

.pipe(sassGlob())

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('css'))

.pipe(postcss([

require('autoprefixer')({

browsers: ['> 1%'],

cascade: false

})

]))

.pipe(cssnano())

.pipe(extReplace('.min.css'))

.pipe(gulp.dest('css'));

});

Variables

Nguyên tắc đặt tên biến và cách khai báo cũng giống với đa phần các ngôn ngữ lập trình khác. Về cơ bản ta sử dụng ký tự $ (giống với jquery) để khai báo biến.

$color: rgba(#aae, .25);
$number: 20;
$string: 'Jamba Juice';
$list: 'Item', 'Item';
$boolean: true;

$nestedList: (
  ('Berry', 80),
  ('Troup', 100)
);

$map: (
  Bubble: 'Pop',
  Trouble: 'Maker'
);

$color: rgba(#aae, .25);

$number: 20;

$string: 'Jamba Juice';

$list: 'Item', 'Item';

$boolean: true;

$nestedList: (

('Berry', 80),

('Troup', 100)

);

$map: (

Bubble: 'Pop',

Trouble: 'Maker'

);

Interpolation

$theme: 'jazz';
$moogle: 8;
$lg: '(min-width: ' + 900px + ')';

.theme_#{$theme} {
  font-size: $moogle#{em};

  @media #{$lg} {}
}

$theme: 'jazz';

$moogle: 8;

$lg: '(min-width: ' + 900px + ')';

.theme_#{$theme} {

font-size: $moogle#{em};

@media #{$lg} {}

}

Math

Thậm chí có thể thực hiện tính toán như các ngôn ngữ lập trình.

.bombay {
  margin: random(100) * 1% 0;
  padding: $chocobo * 2em;
  line-height: (24 / 16);
}

.bombay {

margin: random(100) * 1% 0;

padding: $chocobo * 2em;

line-height: (24 / 16);

}

Nesting

// Input
.straddle {

  @media print {}

  &:focus,
  &:hover {}

  &[attr*="wiggle"] {}

  @at-root .track {}
}

// Input

.straddle {

@media print {}

&:focus,

&:hover {}

&[attr*="wiggle"] {}

@at-root .track {}

}

// Output
.straddle {}

@media print {
  .straddle {}
}

.straddle:focus,
.straddle:hover {}

.straddle[attr*="wiggle"] {}

.track {}

// Output

.straddle {}

@media print {

.straddle {}

}

.straddle:focus,

.straddle:hover {}

.straddle[attr*="wiggle"] {}

.track {}

Giả sử ta viết một đoạn code để style cho danh sách như này:

Kết quả ta sẽ được giống như này:

Conditionals

Mệnh đề điều kiện với if

.ballin {
  $space: 'power';

  @if $space == 'jam' {
    transform: scale(1, -1);
  } @else if $space == 'power' {
    transform: scale(-1, 1);
  } @else {
    transform: scale(0, 0);
  }

  $doodle: 20;

  @if $doodle < 0 {
    background: #eaa;
  } @else if $doodle == 0 {
    background: #aea;
  } @else {
    background: #aae;
  }
}

.ballin {

$space: 'power';

@if $space == 'jam' {

transform: scale(1, -1);

} @else if $space == 'power' {

transform: scale(-1, 1);

} @else {

transform: scale(0, 0);

}

$doodle: 20;

@if $doodle < 0 {

background: #eaa;

} @else if $doodle == 0 {

background: #aea;

} @else {

background: #aae;

}

Mixins

Đây là kỹ thuật giúp các bạn có thể sử dụng lại những đoạn code đã được viết trước đó và có tính lặp lại nhiều lần giống như các chương trình con hoặc hàm trong ngôn ngữ lập trình. Khi nào cần sử dụng những đoạn css giống nhau các bạn chỉ cần gọi “hàm” là đủ.

@mixin turbo($background, $color: '#afa') {
  background: $background;
  color: $color;
}

.speeder {
  @include turbo(#000);
}

@mixin turbo($background, $color: '#afa') {

background: $background;

color: $color;

}

.speeder {

@include turbo(#000);

}

For Loops

Tương tự, chúng ta có thể sử dụng vòng lặp for để viết code

.zazzle {

  @for $i from 1 through 20 {

    &:nth-child(#{$i}) {
      background: hsl((255 / 20) * $i, 90, 60);
    }
  }
}

.zazzle {

@for $i from 1 through 20 {

&:nth-child(#{$i}) {

background: hsl((255 / 20) * $i, 90, 60);

}

Each

Hoặc vòng lặp với Each

$theme-colors: (
  (blue, $blue),
  (mint, $mint)
);

@each $label, $color in $theme-colors {

  .theme-#{$label} & {
    color: $color;
  }
}

$social-themes: (
  facebook: #3b5998,
  twitter: #55acee
);

@each $label, $color in $social-themes {

  .theme-#{$label} {
    color: $color;
  }
}

$theme-colors: (

(blue, $blue),

(mint, $mint)

);

@each $label, $color in $theme-colors {

.theme-#{$label} & {

color: $color;

}

$social-themes: (

facebook: #3b5998,

twitter: #55acee

);

@each $label, $color in $social-themes {

.theme-#{$label} {

color: $color;

}

Trên đây là toàn bộ cách viết trong SASS được cô đọng lại giúp các bạn dễ nhớ, dễ thực hành trong quá trình hoàn thiện dự án của mình. Nếu có vấn đề gì trong nội dung bài viết cần trao đổi, hãy comment bên dưới nhé!

[Share] SASS Cheat Sheet dùng viết css cực nhanh

SASS là gì?

Sass & Gulp

Variables

Interpolation

Math

Nesting

Conditionals

Mixins

For Loops

Each

Like this:

Có liên quan

Nguyễn Trung Hiếu

SASS là gì?

Sass & Gulp

Variables

Interpolation

Math

Nesting

Conditionals

Mixins

For Loops

Each

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu