Tối ưu hóa css và 11 mixin tiện ích có thể ứng dụng với Sass

Một đặc trưng nổi bật của CSS đó chính là có thể viết một cách đơn giản, hơn nữa chi phí học về CSS cũng thấp.

Tuy nhiên nó cũng có một nhược điểm đó chính là có nhiều dòng code, phải lặp đi lặp lại nhiều lần nên có xu hướng trở nên thừa thãi.

Chính vì vậy hiện nay có nhiều người sử dụng ngôn ngữ preprocessor như là Sass để thực hiện xử lý các hàm và biến.

Ngày nay phong trào viết code sao cho ngắn gọn nhất có thể ngày càng được phổ biến. Trong Sass có một chức năng khá tiện ích được gọi là mixin.

Mixin giống như một hàm số ở trong Sass nên nó sẽ trả về các style,… thông qua các giá trị.

Trường hợp gắn tên sau “@mixin” và tự ý sử dụng parameter thì gắn thêm tên phía sau “$”

Khi muốn import từ 1 file khác thì điền sau “@include”

Ở bài viết này, tác giả sẽ giới thiệu cho chúng ta về mixin - một chức năng khá tiện ích của Sass có thể áp dụng vào thực tiễn.

1.Sắp xếp trên dưới, trái phải, ở giữa

Khi sắp xếp trên dưới, trái phải, trung tâm mọi người thường sẽ viết code như thế nào?

Nếu dành thời gian để suy nghĩ bạn có thể sẽ viết được tuy nhiên với mixin bạn có thể viết được ngay với những dòng code ngắn gọn như dưới:

@mixin center {
　　text-align: center;
　　position: relative;
　　top: 50%;
　　-webkit-transform: translateY(-50%);
　　-ms-transform: translateY(-50%);
　　transform: translateY(-50%);
}

2. Tự sinh link color

Có khi nào bạn muốn thay đổi màu sắc của link tùy theo từng vị trí không?

Trong trường hợp đó, bạn sẽ làm như thế nào? Nếu bạn chỉ định màu cho từng cái một như hover, active, focus,… như vậy sẽ tốn rất nhiều công sức.

Ở mixin sẽ tự sinh link color bằng màu sắc mà bạn chi định, bạn có thể tạo set link color như màu của hover sẽ có độ sáng bằng 20% màu sử dụng….

@mixin link-color($color) {
　　color: $color;

　　&:hover, &:active, &:focus {
　　　　color: lighten($color, 20%);
　　}

3. Chỉ định độ trong suốt

Nếu nói đến độ trong suốt thì bạn có thể nghĩ ngay đến việc dùng opacity. Tuy nhiên, bạn có muốn thử thiết lập opacity xử lý cho cross-browser bao gồm cả IE?

@mixin opacity($opacity) {
　　opacity: $opacity;
　　$ieopacity: ($opacity * 100);
　　filter: alpha(opacity=$ieopacity);
}

4. Chỉ định font size (hỗ trợ cho cả rem)

Chỉ định font size theo rem - đơn vị mới được đăng ký ở CSS3

Thông thường chúng ta sẽ sử dụng chỉ định tuyệt đối như px, pt hay chỉ định tương đối như em, % nhưng đối với rem, rem sẽ không chịu ảnh hưởng của các yếu tố cha mà có thể chỉ định trực tiếp font size nên tiện lợi hơn rất nhiều.

@mixin font-size($size, $base: 16) {
　　font-size: $size + px;
　　font-size: ($size / $base) + rem;
}

5. Mũi tên hình tam giác

Mixin có thể giúp bạn tạo mũi tên hiển thị theo hướng trên dưới, trái phải chỉ bẳng CSS. Vì đang hiển thị border nên bạn không thể chèn text vào bên trong được.

Ngoài ra, khi xóa toàn bộ thì nó sẽ biến thành mũi tên màu xám có chiều cao 12px và hướng sang phải.

@mixin trianglearrow($direction: right, $size: 12, $color: $gray){
　　$set: left;

　　@if $direction == left{
　　　　$set: right;
　　}@elseif $direction == top{
　　　　$set: bottom;
　　}@elseif $direction == bottom{
　　　　$set: top;
　　}@else{
　　　　$set: left;
　　}
　　$size: round($size / 2);

　　width: 0;
　　height: 0;
　　border: $size + px solid transparent;
　　border-#{$set}-color: $color;
}

6. Mũi tên

Tiếp theo đối với mũi tên có gắn đuôi, bạn sẽ viết code như nào?

Với mixin bạn có thể chỉ định size, độ rộng của đuôi mũi tên, loại dòng kẻ, màu, hướng mũi tên. Tùy theo hướng mũi tên mà cách tính transform khác nhay nên mũi tên ít nhiều sẽ bị dài hơn.

@mixin arrow($size, $border-width, $border-style, $border-color, $direction) {
　　content: "";
　　display: inline-block;
　　position: absolute;
　　top: 50%;
　　width: $size;
　　height: $size;
　　margin-top: - ($size / 2);
　　border: $border-width $border-style $border-color;
　　@if $direction == up {
　　　　-webkit-transform: rotate(-135) + deg;
　　 　　-moz-transform: rotate(-135) + deg;
　　　　transform: rotate(-135) + deg;
　　}
　　@else if $direction == under {
　　　　-webkit-transform: rotate(45) + deg;
　　　　-moz-transform: rotate(45) + deg;
　　　　transform: rotate(45) + deg;
　　}
　　@else if $direction == right {
　　　　-webkit-transform: rotate(-45) + deg;
　　　　-moz-transform: rotate(-45) + deg;
　　　　transform: rotate(-45) + deg;
　　}
　　@else if $direction == left {
　　　　-webkit-transform: rotate(135) + deg;
　　　　-moz-transform: rotate(135) + deg;
　　　　transform: rotate(135) + deg;
　　}
　　@else {
　　　　-webkit-transform: rotate($direction) + deg;
　　　　-moz-transform: rotate($direction) + deg;
　　　　transform: rotate($direction) + deg;
　　}
}

7. Modern gradient background

Khi bạn chỉ định 1 màu muốn sử dụng, mixin sẽ tự động gợi ý thêm cho bạn 1 màu nữa.

@mixin bg-gradient($angle: 180deg, $color: #0bd, $amount: 20%) {
　　background: linear-gradient($angle, $color, adjust-hue($color, $amount)) fixed;
}

8. Gradient text

Với mixin bên dưới, với những trình duyệt không hỗ trợ cắt gradient phần text bằng background-clip thì có thể hiển thị 1 màu đã chỉ định

@mixin gradient-text($angle: 45deg, $color: #f82, $amount: 35%) {
　　color: $color;
　　background: -webkit-linear-gradient($angle, $color, adjust-hue($color, $amount));
　　-webkit-text-fill-color: transparent;
　　-webkit-background-clip: text;
　　display: inline-block;
}

9. Tự động gắn thuộc tính cho từng loại trình duyệt

Khi sử dụng CSS3, chắc chắn rằng sẽ có lúc bạn phải sử dụng đến thuộc tính cho từng trình duyệt (vd: -webkit- dùng cho chrome, ...)

Chính vì vậy nếu bạn sử dụng mixin dưới thì bạn có thể tự động cấp gắn các thuộc tính sao cho mọi trình duyệt đều hoạt động được.

@mixin prefixes($property, $value) {
　　@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
　　　　#{$prefix}#{$property}: $value;
　　}

10. Xử lý theo kích cỡ màn hình bằng mixin

Việc chỉ định của từng đối tượng phù hợp với các loại màn hình hiển thị khá là phiền toái nên nếu bạn tổng hợp bằng mixin theo @content thì bạn sẽ thấy tiện dụng hơn rất nhiều.

@mixin mediaquery($breakpoint: 768px) {
　　@media screen and (min-width: $breakpoint) {
　　　　@content;
　　}
}

11. Tạo giới hạn cho đoạn text dài

Cuối cùng sẽ là những dòng code ngắn gọn để tạo giới hạn cho một đoạn text dài.

@mixin truncate($width: 100%) {
　　width: $width;
　　max-width: 100%;
　　display: block;
　　overflow: hidden;
　　white-space: nowrap;
　　text-overflow: ellipsis;
}

Tổng kết

Với mixin bạn có thể tự động chèn các giá trị vào các vị trí trùng lặp nên trong nhiều trường hợp nó khá hữu ích. Các bạn hãy thử dùng và cảm nhận nhé!

Trích nguồn: https://ferret-plus.com/6638