<p style="text-align: justify;">Hầu hết c&aacute;c lập tr&igrave;nh vi&ecirc;n hiện nay đều đ&atilde; c&oacute; những kiến thức về SCSS. Tuy nhi&ecirc;n đ&oacute; l&agrave; những người đ&atilde; theo đuổi c&ocirc;ng việc n&agrave;y l&acirc;u năm. C&ograve;n đối với những lập tr&igrave;nh vi&ecirc;n mới v&agrave;o ng&agrave;nh, th&igrave; đ&acirc;y vẫn l&agrave; những kh&aacute;i niệm mới mẻ. Để mọi người c&oacute; thể hiểu hơn về chủ đề n&agrave;y, ch&uacute;ng t&ocirc;i đ&atilde; d&agrave;nh ri&ecirc;ng b&agrave;i viết ng&agrave;y h&ocirc;m nay để giải đ&aacute;p. Vậy SCSS l&agrave; g&igrave;? H&atilde;y c&ugrave;ng <a href="https://old.tek4.vn/">tek4.vn</a> t&igrave;m hiểu trong <a href="https://tek4.vn/">b&agrave;i viết dưới đ&acirc;y</a></p>
<h2 style="text-align: justify;">SCSS l&agrave; g&igrave; ? SCSS v&agrave; CSS</h2>
<h3 style="text-align: justify;">CSS l&agrave; g&igrave;?</h3>
<p style="text-align: justify;">CSS l&agrave; g&igrave;?<strong> CSS (Cascading Style Sheet)</strong> l&agrave; ng&ocirc;n ngữ kịch bản, được sử dụng để thiết kế c&aacute;c trang web. N&oacute; được coi&nbsp;l&agrave; c&ocirc;ng nghệ web quan trọng nhất được sử dụng rộng r&atilde;i c&ugrave;ng với HTML v&agrave; JavaScript. CSS c&oacute; phần mở rộng tệp l&agrave; <strong>.css.</strong></p>
<h3 style="text-align: justify;">SCSS l&agrave; g&igrave;?</h3>
<p style="text-align: justify;">SCSS l&agrave; g&igrave;? <strong>SCSS</strong> (<strong>Syntactically Awesome Style Sheet)</strong>&nbsp;l&agrave; phi&ecirc;n bản n&acirc;ng cao hơn của CSS. N&oacute; được thiết kế bởi Hampton Catlin v&agrave; được ph&aacute;t triển bởi Chris Eppstein v&agrave; Natalie Weizenbaum. Do c&aacute;c t&iacute;nh năng n&acirc;ng cao của n&oacute;, n&oacute; thường được gọi l&agrave; Sassy CSS. SCSS c&oacute; phần mở rộng tệp l&agrave; <strong>.scss &nbsp;</strong></p>
<h2 style="text-align: justify;">Sự kh&aacute;c nhau giữa CSS v&agrave; SCSS</h2>
<ul style="text-align: justify;">
<li>SCSS chứa tất cả c&aacute;c t&iacute;nh năng của CSS v&agrave; c&oacute; nhiều t&iacute;nh năng m&agrave; kh&ocirc;ng c&oacute; trong CSS, điều n&agrave;y l&agrave;m cho n&oacute; trở th&agrave;nh một lựa chọn tốt cho c&aacute;c nh&agrave; ph&aacute;t triển khi sử dụng n&oacute;.</li>
<li>SCSS c&oacute; đầy đủ c&aacute;c t&iacute;nh năng n&acirc;ng cao.</li>
<li>SCSS cung cấp c&aacute;c biến, v&igrave; vậy m&agrave; ch&uacute;ng ta c&oacute; thể r&uacute;t ngắn m&atilde; của m&igrave;nh bằng c&aacute;ch sử dụng c&aacute;c biến. Đ&oacute; l&agrave; một ưu điểm lớn so với CSS th&ocirc;ng thường.</li>
</ul>
<p style="text-align: justify;">V&iacute; dụ: Trong CSS:</p>
<pre class="language-python"><code>body{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
 font-size: xx-large;
 padding: 2rem;
}</code></pre>
<p style="text-align: justify;">Kết quả:</p>
<p><img style="width: 543px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/1e08b920-64ff-43c9-9a1e-7abf01841237" alt="1-30" height="306" /></p>
<p style="text-align: justify;">Trong SCSS:</p>
<pre class="language-python"><code>$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}</code></pre>
<p style="text-align: justify;">Kết quả:</p>
<p><img style="width: 559px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/941fc469-b2b1-4a79-987d-3520cad10cf0" alt="1-30 (1)" height="315" /></p>
<ul style="text-align: justify;">
<li>SCSS gi&uacute;p ch&uacute;ng ta t&ugrave;y chỉnh Bootstrap 4.</li>
<li>SASS th&ecirc;m t&iacute;nh năng @import cho ph&eacute;p ch&uacute;ng ta nhập c&aacute;c tệp SCSS t&ugrave;y chỉnh của m&igrave;nh.</li>
</ul>
<p style="text-align: justify;">V&iacute; dụ:</p>
<pre class="language-python"><code>@import "my theme";
@import "framework/bootstrap";</code></pre>
<ul style="text-align: justify;">
<li>SASS cho ph&eacute;p ch&uacute;ng ta sử dụng c&uacute; ph&aacute;p lồng nhau (nested syntax). Giả sử nếu muốn tạo kiểu cho một &lsquo;đoạn văn&rsquo; trong &lsquo;div&rsquo; trong &lsquo;footer&rsquo;, ch&uacute;ng ta chắc chắn c&oacute; thể l&agrave;m điều đ&oacute; bằng SASS như sau:</li>
</ul>
<pre class="language-python"><code>footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}</code></pre>
<ul style="text-align: justify;">
<li>Cuối c&ugrave;ng, SASS trở th&agrave;nh một lựa chọn tốt để sử dụng l&agrave; v&igrave; n&oacute; cung cấp t&agrave;i liệu đầy đủ. Trong khi đ&oacute;,&nbsp;CSS l&agrave; nền tảng của c&aacute;c trang web, được sử dụng để ph&aacute;t triển trang web bằng c&aacute;ch tạo kiểu cho c&aacute;c trang web v&agrave; ứng dụng web.</li>
</ul>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">Qua b&agrave;i viết tr&ecirc;n, Hi vọng bạn đ&atilde; c&oacute; cho m&igrave;nh những th&ocirc;ng tin hữu &iacute;ch về SOLID l&agrave; g&igrave;? Đừng bỏ qua c&aacute;c b&agrave;i viết của Old.tek4.vn để c&oacute; th&ecirc;m nhiều kiến thức bổ &iacute;ch về c&ocirc;ng nghệ v&agrave; lập tr&igrave;nh nh&eacute;.</p>
<p style="text-align: justify;">&nbsp;</p>

Admin

SCSS là gì ? Tìm hiểu Sự khác biệt giữa CSS và SCSS

Cùng tác giả

Admin

Có liên quan