Bạn đang xem : liên kết tệp sass với html

  • Chia sẻ

  • Tweet

  • Ghim

lượt chia sẻ

Sass là ngôn ngữ mở rộng CSS cấp chuyên nghiệp trưởng thành, ổn định và mạnh mẽ nhất trên thế giới. Nó là một trình biên dịch css hữu ích rất phổ biến hiện nay một ngày. Ngoài ra còn có các trình biên dịch css khác như less, v.v. nhưng sass đã được sử dụng từ lâu. Trên thực tế, bản thân Bootstrap đã chấp nhận Sass và nó đã cập nhật mã của mình bằng cách sử dụng sass trong phiên bản mới nhất của nó.

Trong blog này, tôi sẽ giải thích cách biên dịch tệp sass (.scss) sang tệp css (.css) quen thuộc nhất của chúng ta.

Có nhiều cách để cài đặt sass nhưng tôi sẽ cài đặt nó một cách rất đơn giản.

Đối với người dùng Linux

Nếu bạn đang sử dụng bản phân phối của Linux, trước tiên bạn cần cài đặt Ruby. Bạn có thể cài đặt Ruby thông qua trình quản lý gói apt, rbenv hoặc rvm.

sudo gem install sass –no-user-install

Đối với người dùng Windows

Trước khi bắt đầu sử dụng Sass, bạn cần cài đặt Ruby. Cách nhanh nhất để tải Ruby trên máy tính Windows của bạn là sử dụng Ruby Installer . Đó là trình cài đặt chỉ với một cú nhấp chuột sẽ giúp bạn thiết lập mọi thứ cực nhanh.

Trình cài đặt cũng sẽ cài đặt ứng dụng PowerShell dòng lệnh Ruby cho phép bạn sử dụng các thư viện Ruby.

Đối với người dùng Mac

Nếu bạn thích dòng lệnh hơn một ứng dụng thì việc thiết lập Sass là một quá trình khá nhanh chóng. Sass có sự phụ thuộc vào Ruby nhưng nếu bạn đang sử dụng máy Mac thì xin chúc mừng, Ruby đã được cài đặt sẵn.

Vì tôi là người dùng hệ điều hành windows, tôi sẽ sử dụng quy trình windows.

Bước 1

Truy cập Ruby Installer @ https://rubyinstaller.org/ và tải xuống phần mềm theo cấu hình máy của bạn. Của tôi là windows 32 bit, vì vậy tôi sẽ tải xuống và cài đặt Ruby 2.4.2-2 (x86)

Ruby Installer

(Bạn có thể nghĩ rằng Ruby Installer là gì, bạn sẽ tìm thấy mọi thứ tại liên kết trang web được đề cập ở trên)

Bước 2

Mở Terminal hoặc Command Prompt của bạn.

Trên Mac, Terminal.app được cài đặt theo mặc định. Nó nằm trong thư mục “Tiện ích” của bạn.

Trên Windows, chạy `cmd`.

Cài đặt Sass.

Ruby sử dụng Đá quý để quản lý các gói mã khác nhau của nó như Sass. Trong cửa sổ dòng lệnh đang mở của bạn

gem cài đặt sass

Cài đặt Sass

Nếu bạn nhận được thông báo lỗi thì có khả năng bạn sẽ cần sử dụng lệnh sudo để cài đặt đá quý Sass. Nó sẽ giống như sau:

sudo gem install sass

Bạn sẽ nhận được rất ít dòng thông báo đã cài đặt trong cmd như

Sass đã cài đặt thành công

Bây giờ, bạn đã cài đặt Sass, nhưng không bao giờ phải kiểm tra lại. Trong ứng dụng terminal / cmd của mình, bạn có thể nhập:

sass -v

Nó sẽ trả về Sass 3.5.3. (Bleeding Edge)

Sass version

Xin chúc mừng! Bạn đã cài đặt thành công Sass trên máy tính của mình

Bước 3

Chuyển đến thư mục dự án nơi bạn muốn chạy sass qua cmd hoặc terminal.

Trong trường hợp của tôi, tôi có một thư mục chính “sass” và trong thư mục này có một thư mục riêng biệt có tên “css”, nơi tôi muốn lưu trữ tất cả các biểu định kiểu. Vì vậy, tôi sẽ chuyển đến thư mục css bằng cách sử dụng dấu nhắc lệnh.

Goto css folder

Bước 4

Bây giờ, hãy tạo tệp index.html trong thư mục chính và tạo tệp sass với phần mở rộng .scss trong thư mục css theo cách thủ công.

Tạo thư mục cần thiết

Bước 5

Đi tới dấu nhắc lệnh và khi Sass được cài đặt, bạn có thể chạy

sass input.scss output.css

từ cmd hoặc thiết bị đầu cuối của bạn. Điều này có nghĩa là tệp output.css sẽ được tạo và tệp sass input.scss sẽ được biên dịch thành output.css, những gì bạn viết trong sass thì nó sẽ xuất ra kết quả trong output.css

tạo tệp đầu ra

Bạn cũng có thể yêu cầu Sass xem tệp và cập nhật CSS mỗi khi tệp Sass tự động thay đổi bằng lệnh watch

sass –watch input.scss: output.css

Xem tệp scss if chages

Bước 6

Truy cập tệp input.scss và cố gắng viết sass như

Mã tệp Sass

Bây giờ, nếu bạn mở tệp output.css mới tạo, bạn có thể thấy sass này đã được biên dịch thành css thành công.

mã tệp css

Cùng với đó, bạn luôn có thể thấy dấu nhắc lệnh đã tự động cập nhật và bất cứ khi nào bạn viết sass trong tệp sass và sau đó nếu bạn lưu tệp, văn bản dấu nhắc lệnh này sẽ cập nhật.

cmd changes

Bước 7

Mở index.html và liên kết output.css với trang

liên kết đến trang html

Bây giờ, nếu chúng tôi chạy index.html trong một trình duyệt, chúng tôi có thể thấy tác dụng của biểu định kiểu của chúng tôi.

sass đang chạy trong trình duyệt

Cùng với đó, nếu chúng tôi gỡ lỗi / kiểm tra phần tử, chúng tôi có thể thấy tất cả các kiểu đến từ tệp input.scss

Gỡ lỗi

Chỉ vậy thôi.

Đây là cách bạn có thể tạo phong cách của riêng mình bằng cách sử dụng sass và chạy chúng trên tất cả các trình duyệt.

Nguồn lịch sự : http://sass-lang.com/

Hãy chia sẻ nếu bạn thích nó!

Theo dõi tôi trên LinkedIn

Preetam Mallick

Người đăng ký

Nhà phát triển giao diện người dùng

,

Giải pháp Openweb

Theo chuyên môn, tôi là Nhà phát triển giao diện người dùng tại Openweb Solutions.


Xem thêm những thông tin liên quan đến chủ đề liên kết tệp sass với html

SASS Tutorial (build your own CSS library) #4 – Partials & @import

alt

  • Tác giả: The Net Ninja
  • Ngày đăng: 2021-08-25
  • Đánh giá: 4 ⭐ ( 7408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey gang, in this SASS tutorial you’ll learn how to use partials to organize our code using the @import rule.

    🐱‍👤 Get the full SASS course now on Net Ninja Pro:
    https://netninja.dev/p/complete-sass-tutorial

    🐱‍👤 Get access to all other premium courses on Net Ninja Pro:
    https://netninja.dev/

    🐱‍💻 Access the course files on GitHub:
    https://github.com/iamshaunjp/complete-sass-tutorial

    🐱‍💻 HTML & CSS Crash Course:
    On Net Ninja Pro – https://netninja.dev/p/html-css-crash-course
    On YouTube – https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

    🐱‍💻 Modern JavaScript Course:
    On Net Ninja Pro – https://netninja.dev/p/modern-javascript-from-novice-to-ninja
    On YouTube – https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc

    🐱‍💻 CSS Flexbox Course (on YouTube):
    https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG

    🐱‍💻 SASS docs – https://sass-lang.com/documentation
    🐱‍💻 VS Code – https://code.visualstudio.com/

    ————– Net Ninja Links:

    🐱‍💻 My Social Links:
    Facebook – https://www.facebook.com/thenetninjauk
    Twitter – https://twitter.com/thenetninjauk
    Instagram – https://www.instagram.com/thenetninja/

    🐱‍👤 Get access premium courses on Net Ninja Pro:
    https://netninja.dev/

Thiết kế web HTML và cắt CSS từ Photoshop với SASS

  • Tác giả: www.kienthucviet.vn
  • Đánh giá: 5 ⭐ ( 9428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

SASS/SCSS là gì? Tất tần tật về SASS và SCSS

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 3403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc…

Các liên kết trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 8772 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Siêu liên kết cho phép người sử dụng điều hướng tới những nội dung khác.

Sử dụng Sass cho CSS trong Ứng dụng React của bạn

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 5416 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Viết mã JavaScript chỉ là một phần của câu đố khi bạn phát triển các ứng dụng web với React. Bạn cũng cần triển khai thiết kế với CSS style sheet. Tuy nhiên, khi các ứng dụng của bạn lớn…

Liên kết css với html

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 2906 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS được thêm vào các trang HTML để định dạng trang web theo quy tắc CSS. Có ba cách để liên kết CSS với HTML. CSS nội tuyến, CSS nội bộ (Internal CSS), CSS

Cách kết hợp BEM, SASS và Bootstrap một cách ăn ý

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới Thiệu Chào mọi người, đối với những người mới học về BEM, SASS và Bootstrap như mình thì không khỏi bối rối khi muốn kết hợp cả ba một cách ăn ý. Trong bài viết này, mình sẽ giới thiệu nhanh về…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  12 Cách Làm Cô Bé Ra Nhiều Nước Khiến Nàng Giật Giật Vì Sướng - tách số ra khỏi chuỗi

By ads_php