What are 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.
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



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!

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!

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.

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;".

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.

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!

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);}".

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. .
