Home Web Front-end Front-end Q&A What are css3, less, sass

What are css3, less, sass

Mar 17, 2022 pm 06:08 PM
css3 less sass

css3 is an upgraded version of CSS technology, a computer language used to express file styles such as HTML or XML; Less is a CSS extension and dynamic style sheet language, and a CSS preprocessor; Sass is a CSS preprocessing language written in Ruby that can be used to describe file styles clearly and structurally.

What are css3, less, sass

The operating environment of this tutorial: windows7 system, CSS3&&Sass3.7.4 version, Dell G3 computer.

What is CSS3?

CSS is the abbreviation of Cascading Style Sheets. It is an application used to express HTML (Standard Generalized Markup Language) or XML (Standard Generalized Markup Language). a subset) and other file-style computer languages.

CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

CSS3 is an upgraded version of CSS (Cascading Style Sheets) technology. It was formulated in 1999. On May 23, 2001, W3C completed the working draft of CSS3, which mainly includes box model, list module and hyperlink method. , language module, background and border, text effects, multi-column layout and other modules.

One of the major changes in the evolution of CSS is the W3C's decision to break CSS3 into a series of modules. Browser vendors innovate quickly at the pace of CSS, so by taking a modular approach, elements in the CSS3 specification can move forward at different speeds because different browser vendors only support given features. But different browsers support different features at different times, which also complicates cross-browser development.

The principle of CSS3 is the same as that of CSS. It is to customize the selectors of the style sheet in the web page, and then reference these selectors in large numbers in the web page.

New features

There are many new features of CSS3, such as rounded corners, graphical borders, block shadows and text shadows, using RGBA to achieve transparency effects, gradients Effects, use @Font-Face to achieve customized fonts, multiple background images, text or image deformation processing (rotation, scaling, tilting, movement), multi-column layout, media queries, etc.

What is Less?

Less is a CSS extension and dynamic style sheet language, a CSS preprocessor that can run on the client or server side, helping us customize, manage and reuse the style of web pages surface.

Less is an open source language that is also cross-browser compatible.

Advantages:

1. Less is a CSS preprocessor. After compilation, it generates simple CSS, suitable for browsers.

2. Less supports cross-browser compatibility.

3. Since Less uses nesting, the code is shorter, cleaner, and organized in a specific way.

4. Since Less uses variables, maintenance can be achieved faster.

5. Less provides a series of operators to make coding faster and more time-saving.

6. Less provides @mport rules so that we can easily process external files. NOTE: Importing is required because many people split their stylesheet into multiple files instead of putting it into one file.

7. Less provides merge attributes. The most exciting feature of Less is accepting multiple values ​​such as transform, transition and box-shadow.

8. Less is written in JavaScript, which can compile faster than other preprocessors for CSS.

Disadvantages:

1. If we are not familiar with CSS preprocessing, we must spend some time learning the relevant knowledge of Less.

2. Compared with older preprocessors such as SASS which include frameworks such as Compass, Gravity and Susy, Less provides fewer frameworks.

3. In Less, there is tight coupling between modules, so reusing and/or testing related modules requires more effort.

What is sass?

Sass is a meta-language higher than CSS. It can be used to describe file styles clearly and structurally, and has more powerful functions than ordinary CSS. Sass provides a cleaner, more elegant syntax while providing a variety of features to create maintainable and manageable stylesheets.

Sass is a CSS preprocessing language written in Ruby language. It was born in 2007 and is the largest mature CSS preprocessing language. It was originally designed to work with HAML (an indented HTML precompiler), so it has the same indentation style as HTML. SASS is an extension of CSS3 that adds rule nesting, variables, mixins, selector inheritance, and more. Convert it into standard, well-formed CSS code by using command line tools or WEB framework plug-ins.

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What are css3, less, sass. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

What does sass software mean? What does sass software mean? Aug 15, 2022 am 11:39 AM

The full name of SASS is "Software as a service", which means "software as a service"; it is a software deployment model in which third-party suppliers build applications on cloud infrastructure and provide these to customers through the Internet in the form of subscriptions. applications that do not require customers to build the underlying infrastructure upfront. This means that the software can be accessed on any device with an internet connection and a web browser, unlike traditional software that can only be installed on your local machine.

It turns out that text carousel and image carousel can also be realized using pure CSS! It turns out that text carousel and image carousel can also be realized using pure CSS! Jun 10, 2022 pm 01:00 PM

How to create text carousel and image carousel? The first thing everyone thinks of is whether to use js. In fact, text carousel and image carousel can also be realized using pure CSS. Let’s take a look at the implementation method. I hope it will be helpful to everyone!

How to enlarge the image by clicking the mouse in css3 How to enlarge the image by clicking the mouse in css3 Apr 25, 2022 pm 04:52 PM

Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".

Does css3 animation effect have deformation? Does css3 animation effect have deformation? Apr 28, 2022 pm 02:20 PM

The animation effect in css3 has deformation; you can use "animation: animation attribute @keyframes ..{..{transform: transformation attribute}}" to achieve deformation animation effect. The animation attribute is used to set the animation style, and the transform attribute is used to set the deformation style. .

See all articles