Sass Là Gì? Các Tiện Ích Của Sass Trong Thiết Kế Web

SCSS

*{
   margin:0;
   padding:0;
   box-sizing: border-box;
 }
$color-nav: #1E90FF;
nav{
   margin: 30px;
   padding: 12px;
   background-color: $color-nav;
 }

Như bạn thấy thì chúng ta sử dụng $color-nav để lưu trữ thông tin màu sắc cho thanh tiêu đề. Sau này khi bạn muốn đổi màu nền của navigation thì chỉ cần thay đổi giá trị của biến $color-nav là được. Và kết quả bạn xem hình ảnh bên dưới nha.

Cách sử dụng nesting trong Sass

Tiếp tục với ví dụ trên tất cả chúng ta sẽ đi vào khám phá cách những selector được lồng vào nhau nhé .

SCSS

.navigation {
   list-style: none;
 li {
   display: inline-block;
   margin-left: 30px;
  }
}

Để hiểu rõ hơn cách lồng những selector trong Sass thì bạn xem hình ảnh bên dưới nha .Ở đây mình có một quan tâm nhỏ là nó sẽ không số lượng giới hạn những selector hoàn toàn có thể lồng vào với nhau. Do đó bạn trọn vẹn hoàn toàn có thể chọn bất kỳ thành phần con nào mà mình mong ước. Và hiệu quả của đoạn mã trên ở bên dưới nha :

Tiếp theo mình muốn giới thiệu đến bạn một thuộc tính là &. Nó sẽ giúp chúng ta có thể tránh lặp lại phần tử selector trong đoạn mã. Để hiểu rõ hơn bạn hãy xem hình ảnh dưới đây nhé!

Và dưới đây là dự án Bất Động Sản tạo navigation hoàn hảo bằng HTML và SCSS trên codepen nhé !See the Pen by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .

  
          Sign In     Sign Up
  

SCSS

*{
   margin:0;
   padding:0;
   box-sizing: border-box;
 }
$color-nav: #1E90FF;
 $color-link: #fff;
 $background-color-signin:#00BFFF;
 $background-color-signup:#FF8C00;
 $width-btn: 150px;
nav{
   margin: 30px;
   padding: 12px;
   background-color: $color-nav;
   &::after{
   content: "";
   clear: both;
   display: table;
   }
 }
 .navigation{
   list-style: none;
    float: left;
   li{
     display: inline-block;
     margin-left: 30px;
     &:first-child{
      margin: 0px;
     }
     a{
       text-decoration: none;
       color: $color-link;
     }
   }
 }
.btn{
  float: right;
 }
 .btn-signin,
 .btn-signup{
   display: inline-block;
   text-align: center;
   border-radius: 100px;
   text-decoration: none;
   width : $width-btn;
   color: $color-link;
  }
.btn-signin{
   &:link{
    background-color: $background-color-signin;
   }
 }
.btn-signup{
   &:link{
    background-color: $background-color-signup;
   }
 }

Và hiệu quả bạn xem hình ảnh dưới đây nhé !

Bây giờ chúng ta sẽ bắt đầu sử dụng thuộc tính @mixin vào đoạn mã trên để giúp nó dễ chỉnh sửa và sử dụng lại ở sau này nhé. Đầu tiên mình sẽ tạo một chức năng clearfix để xoá các ảnh hưởng về khoảng cách khi sử dụng thuộc tính float ở trong website.

Để hiểu rõ hơn về cách khai báo và sử dụng thì bạn hãy xem hình ảnh dưới đây nha !

Và bây giờ khi lúc nào bạn cần sử dụng clearfix thì chỉ cần gọi @include clearfix vào đối tượng selector mà mình mong muốn. Kết quả bạn xem trên Codepen nha.

See the Pen bai thuc khô cứng ve sass 2 by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .

Trong phần tiếp theo này mình sẽ giới thiệu đến bạn cách sử dụng tham số trong @mixin. Để hiểu rõ hơn thì bạn xem hình ảnh dưới đây nha.

Như bạn thấy thì $color sẽ là màu sắc mà chúng ta muốn chọn cho đối tượng và tuỳ vào các thành phần khác nhau thì bạn sẽ chọn các màu sắc khác nhau cho phù hợp. Điểm minh thích ở đây chính là chúng ta có thể gán color vào trực tiếp mà không cần phải viết lại đoạn code mới. Và kết qủa bạn xem dự án ở bên dưới nhé!

See the Pen bai thuc hanh hao ve sass by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .

Cách sử dụng function()

Trong phần này tất cả chúng ta sẽ cùng nhau đi vào khám phá cách sử dụng function của Sass vào phong cách thiết kế và tăng trưởng web nhé. Mình sẽ lấy ví dụ ở trên để minh họa công dụng của nó là giúp Bạn hoàn toàn có thể viết những biểu thức phức tạp với giá trị do tất cả chúng ta cung ứng .Và tác dụng bạn xem trên Codepen nhé !See the Pen bai thuc khô cứng ve sass 3 by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .

Cách sử dụng extend()

Extend được cho phép thừa kế những thuộc tính của những thành phần khác. Và để hiểu rõ hơn thì tất cả chúng ta hãy sử dụng nó vào ví dụ phía trên nhé !

Như bạn thấy thì chúng ta có hai nút sign in và sign up đều được sử dụng chung các thuộc tính CSS do đó mình sẽ sử dụng chức năng extend để viết một đoạn code để sử dụng chung nha.