tìm hiểu về công nghệ less, giới thiệu về less

CSS Khá đơn giản tuy nhiên khi có hàng ngàn dòng CSS mà cần phải thay đổi một chỗ thì thật mệt mỏi.. CSS Khá đơn giản tuy nhiên khi có hàng ngàn dòng CSS mà cần phải thay đổi một chỗ thì

Giới thiệu LESS

Giáo viên hướng dẫn: Phạm Công Thành

Nhóm thực hiện:

1.Phạm Thị Kim Chi K124060966

2.Nguyễn Thị Thu Phương K124061022

3.Nguyễn Thị Yến Thanh K124061027

4.Trần Thị Minh Thảo K124061029

5.Nguyễn Thị Thu Thảo K124061031

1

CSS Khá đơn giản tuy nhiên khi có hàng ngàn dòng CSS mà cần phải thay đổi một chỗ thì thật mệt mỏi.

CSS Khá đơn giản tuy nhiên khi có hàng ngàn dòng CSS mà cần phải thay đổi một chỗ thì thật mệt mỏi.

LESS ra đời

Khái niệm

Khái niệm

• LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức

• LESS giúp:

- Viết các đoạn mã CSS đơn giản, ngắn gọn và hiệu quả hơn

- Dễ quản lý hơn bằng cách thêm các thành phần động vào CSS

3

Mixins

Nested Rules Hàm và toán tử

Scope

Cú pháp

• Cho phép khai báo giá trị được sử dụng nhiều lần tại một chỗ, và sử dụng nó trong toàn bộ style của bạn Vì thế khi muốn thay đổi giá trị này, bạn chỉ cần thay đổi tại một chỗ

5

Ví dụ:

// Less

@color : #4D926F;

#header {

color : @color;

}

h2 {

color : @color;

}

=> Ta thấy Less ấn định giá trị màu #4D926F cho

biến @color và biến này dùng chung cho cả header và h2

• Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia Nó gần giống với biến, nhưng thay giá trị bằng toàn bộ các thuộc tính của class

7

• Giả sử chúng ta khai báo một lớp (class) dùng cho hiển thị màu gradient như sau :

.gradients {

background: #eaeaea;

background: linear-gradient(top, #eaeaea, #cccccc);

background: -o-linear-gradient(top, #eaeaea, #cccccc);

background: -ms-linear-gradient(top, #eaeaea, #cccccc);

background: -moz-linear-gradient(top, #eaeaea, #cccccc);

background: -webkit-linear-gradient(top, #eaeaea, #cccccc);

}

=> Toàn bộ thuộc tính bên trong đã được ấn định vào gradients vậy khi bạn muốn dùng màu này cho bất cứ khai báo nào khác bạn chỉ cần đặt gradients vào ngay bên trong là được.

Ví dụ:

div {

.gradients;

border: 1px solid #555;

border-radius: 3px;

}

9

// LESS

.rounded-corners (@radius: 5px) {

border-radius: @radius;

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

}

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

Đoạn Css tương ứng là:

#header {

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

}

#footer {

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

10

Nested Rules

• Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector vào nhau Việc này làm cho quan hệ thừa kế trở nên

rõ ràng hơn và code stylesheet cũng ngắn gọn hơn

11

Nested Rules

• // LESS

#header

{

h1 {

font-size: 26px;

font-weight: bold;

}

p { font-size: 12px;

a { text-decoration: none;

&:hover { border- width: 1px }

}

}

}

Biên dịch ra CSS:

#header h1{

font-size: 26px;

font-weight: bold;}

#header p {

font-size: 12px;}

#header p a {

text-decoration: none;}

12

Hàm & toán tử

• Toán tử cho phép cộng, trừ, nhân, chia giá trị của các thuộc tính, màu sắc, làm cho giá trị của các thuộc tính có liên quan tới nhau Cho phép thao tác với các giá trị theo bất cứ cách nào bạn muốn

13

Hàm & toán tử

Ví d : ụ

// 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%);

}

=> Ta ấn định giá trị 1px vào

biến @the-border như vậy khi

đến #header giá trị biến

@the-border sẽ được sử dụng

cho border-left và boder-right,

với boder-right giá trị của nó sẽ được nhân 2 Tương tự với các biến khác.

• Biến sẽ được thừa hưởng giá trị trong phạm vi gần nó nhất

header {

@color: black;

background-color: @color;

nav {

@color: blue;

background-color: @color;

a {

color: @color;

}

}

}

header sẽ có màu background là màu đen, trong khi màu nav là màu xanh da trời, và màu của a cũng là màu xanh da trời.

15

Thank you!