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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$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
|
1 2 3 4 5 6 7 8 9 |
$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.
|
1 2 3 4 5 |
.bombay { margin: random(100) * 1% 0; padding: $chocobo * 2em; line-height: (24 / 16); } |
Nesting
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Input .straddle { @media print {} &:focus, &:hover {} &[attr*="wiggle"] {} @at-root .track {} } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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à đủ.
|
1 2 3 4 5 6 7 8 |
@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
|
1 2 3 4 5 6 7 8 9 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$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é!
