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

  • Chia sẻ

  • Tweet

  • Ghim

< p> 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 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 sass với html

Build a Responsive Website Using HTML & SASS/SCSS Tutorial

alt

  • Tác giả: Brian Design
  • Ngày đăng: 2020-10-25
  • Đánh giá: 4 ⭐ ( 7845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to build a simple responsive website homepage using HTML and SASS/SCSS. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. Essentially CSS with superpowers.

    If you want to follow me along my coding journey, be sure to subscribe 🙂
    https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1

    Timeline:
    0:00 What we are building
    1:06 Creating our Project files
    4:40 Adding Navbar Code
    7:56 Adding Hero Section Code
    9:52 Adding SASS styles
    24:58 Adding Hero Section styles

    Source Code
    https://www.codavilla.com/posts/build-a-responsive-website-using-html-and-sass

    HTML, CSS, and Javascript Website Tutorial
    https://youtu.be/3-2Pj5hxwrw

    Alternative HTML, CSS and JS Website
    https://youtu.be/FazgJVnrVuI

    Feel free to refactor my code and let me know any ways to improve it

Liên kết trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 9892 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng liên kết trong HTML.

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

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 3731 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…

Sử dụng hình ảnh và liên kết trong HTML

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 9349 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình sẽ giới thiệu các bạn về thẻ hình ảnh và thẻ đường dẫn html cho phát triển website.

Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 7290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các mạng xã hội hiện này là không thể thiếu với giới trẻ, nó phổ biến đến mức đã có nhiều người gọi nó là vấn nạn nghiện mạng xã hội. Chính vì vậy mà việc.

Các cách kết nối css vào html

  • Tác giả: hocweb123.com
  • Đánh giá: 4 ⭐ ( 5598 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Liên kết CSS với HTML

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

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  Upload file trong PHP - $_files trong php

By ads_php