less css la gi

By Admin 08/09/2023 0

less-wordpress1.jpg

I. LESS LÀ GÌ?

LESS là một trong CSS preprocessor, hỗ trợ chúng ta viết lách những đoạn mã CSS đơn giản và giản dị, cộc gọn gàng và hiệu suất cao rộng lớn, bên cạnh đó cũng dễ dàng quản lý và vận hành rộng lớn bằng phương pháp thêm nữa CSS những bộ phận động như biến hóa, mixins, toán tử và hàm. LESS được cải tiến và phát triển bởi vì Alexis Sellier, một xây dựng viên người Đức.

Bạn đang xem: less css la gi

II. Cách sử dụng

Cách dùng ở Client-side

Sử dụng LESS thì cực kì đơn giản và giản dị, tất cả chúng ta chỉ việc bịa đặt 2 loại này vô bên phía trong thẻ <head> là được. Nhưng điều thứ nhất là chúng ta cần tải về less.js về máy của tôi.

Link tệp tin .less với tính chất rel là “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Thêm tệp tin less.js vô thẻ <head> như sau:

 <script src="less.js" type="text/javascript"></script>

Phải chắc hẳn rằng rằng tệp tin .less được bịa đặt trước less.js.

III. Cú pháp của LESS

Không tương tự CSS thường thì, LESS hoạt động và sinh hoạt như 1 ngữ điệu xây dựng, nó cũng đều có khai báo biến hóa, toán tử…

1. Khai Báo Biến (Variables)

CSS thông thường.

.class1 {
background-color: #2d5e8b;
}
.class2 {
background-color: #fff;
color: #2d5e8b;
}
.class3 {
border: 1px solid #2d5e8b;
}

LESS css

@color: #2d5e8b;
.class1 {
background-color: @color;
}
.class2 {
background-color: #fff;
color: @color;
}
.class3 {
border: 1px solid @color;
}

Ta thấy LESS khai báo biến hóa @color: #2d5e8b; là color sử dụng cộng đồng cho tất cả 3 lớp (class). Và với loại khai báo thế này, thì chỉ từng khi chúng ta dùng , chỉ việc gọi lại biến hóa @color, bên cạnh đó trong tương lai nếu như bạn thích thay đổi color thì chỉ việc thay cho thay đổi color bên trên biến hóa @color-base.

VD:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

Biên dịch css

#header {
  color: #6c94be;
}

2. Mixins

Mixins được cho phép gắn toàn cỗ tính chất của một class vô CSS vô vào class không giống bởi vì một cơ hội khá đơn giản và giản dị là tăng thương hiệu class này như 1 tính chất của class bại. Nó tương tự với biến hóa, tuy nhiên thay cho độ quý hiếm bởi vì toàn cỗ những tính chất của class. Mixins cũng rất có thể được dùng như hàm, bằng phương pháp truyền thông số, như ví dụ bên dưới đây:

// LESS

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Giờ tớ ham muốn dùng những tính chất của class này ở trong những 'ruleset' không giống. Để thực hiện được điều này, chỉ việc tăng thương hiệu class này vô bên phía trong ngẫu nhiên 'ruleset' nào là tớ ham muốn thêm nữa, như sau:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

Các tính chất của class .bordered tiếp tục xuất hiện tại ở cả #menu a và .post a:

Biên dịch

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

####3. **Mixins với tham lam số**

Khi dùng Mixin vô LESS, rất có thể truyền thông số vô như ví dụ sau:
```css

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Cách sử dụng


# header {

  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Mixins với thông số cũng rất có thể có mức giá trị đem quyết định cho những tham lam số:


.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Ta rất có thể gọi mixin này như sau:


# header {

  .border-radius;
}

Nó tiếp tục thêm nữa #header tính chất border-radius với độ quý hiếm là 5px.

Cũng rất có thể gọi mixin với thông số nhưng mà ko truyền thông số vô. Như vậy rất rất hữu dụng Khi ham muốn ẩn mixin bại Khi dịch rời khỏi CSS nhưng mà vẫn ham muốn chèn những tính chất của chính nó vô 'ruleset' không giống.

Xem thêm: đấu phá thương khung full


.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

kết quả


pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

Biến @arguments

Biến @arguments với 1 ý nghĩa sâu sắc đặc trưng vô mixin, nó chứa chấp độ quý hiếm của toàn bộ những thông số truyền vô mixin. Nó này rất rất hữu dụng khi chúng ta ko cần ham muốn thao tác với từng thông số riêng biệt lẻ:


.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

kết quả


  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

** Nested Rules**

Thay vì thế viết lách những thương hiệu selector lâu năm nhằm chỉ ra rằng những mối quan hệ quá tiếp vô CSS, với Less chúng ta cũng có thể lồng những selector và nhau. Việc này thực hiện mang lại mối quan hệ quá tiếp trở thành rõ nét rộng lớn và code stylesheet cũng cộc gọn gàng rộng lớn.


// LESS

# header {

  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Đoạn code bên trên cộc gọn gàng rộng lớn và tương tự với cấu hình DOM.

Biên dịch rời khỏi CSS


# header h1 {

  font-size: 26px;
  font-weight: bold;
}

# header p {

  font-size: 12px;
}

# header p a {

  text-decoration: none;
}

# header p a:hover {

  border-width: 1px;
}

Chú ý rằng vệt & được dùng Khi bạn thích gắn selector bên phía trong với selector ngoài, thay cho coi nó như selector con cái. Như vậy rất rất cần thiết và được dùng với những pseudo-class như :hover và :focus.

VD:


.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

Kết quả


.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

####**4. Hàm & toán tử **

Toán tử được cho phép nằm trong, trừ, nhân, phân tách độ quý hiếm của những tính chất, sắc tố, thực hiện mang lại độ quý hiếm của những tính chất với tương quan cho tới nhau. Hàm ánh xạ đơn với code JavaScript, được cho phép thao tác với những độ quý hiếm theo đuổi bất kể cơ hội nào là bạn thích.


// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

# header {

  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

# footer {

  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Biên dịch


/* Biên dịch rời khỏi CSS */

# header {

  color: #333;
  border-left: 1px;
  border-right: 2px;
}

# footer {

  color: #114411;
  border-color: #7d2717;
}

Less rất có thể nắm vững sự không giống nhau trong số những sắc tố và đơn vị chức năng. Nếu đơn vị chức năng được dùng với toán tử, tương tự như:


@var: 1px + 5;

Kết ngược được xem là 6px.

Dấu ngoặc cũng khá được dùng kèm cặp với toán tử:


width: (@var + 5) * 2;

Phạm vi

Phạm vi vô LESS tương tự động như trong những ngữ điệu xây dựng. Trình biên dịch tiếp tục thăm dò tìm tòi những biến hóa và mixin thứ nhất vô phạm vi local, và nếu như không thấy, nó sẽ bị thăm dò ở phạm vi phụ thân, và cứ nối tiếp cho tới lúc nào nhìn thấy.


@var: red;

# page {

  @var: white;

# header {

    color: @var; // white
  }
}

# footer {

  color: @var; // red
}

Importing

Xem thêm: nô lệ câm truyện tranh full

Bạn rất có thể import tệp tin .less, Khi bại toàn bộ những biến hóa và mixin vô tệp tin bại sẽ tiến hành thêm nữa vô tệp tin gọi. cũng có thể ko cần thiết đuôi .less, nên cả nhì tình huống sau đây đều phù hợp lệ:


@import "lib.less";
@import "lib";

Nếu bạn thích import một tệp tin CSS, chỉ việc tăng đuôi .css:


@import "lib.css";

Ngoài rời khỏi, vô LESS cũng rất có thể dùng hàm, namespace, javascript evaluation,… một vài hàm thao tác với color sắc: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() and mix(). quý khách rất có thể coi cụ thể rộng lớn bên trên http://lesscss.org/features/#features-overview-feature .