What is Stylus ?
Stylus is a tool used for inputting information into a touch screen device or other electronic device with a touch-sensitive surface. It typically looks like a pen, with a narrow pointed end that is used to tap, write, or draw on the screen. The stylus can be made of various materials, including plastic, metal, or rubber, and may have different tips, such as soft or hard tips, depending on the desired function.
Styluses are often used with mobile devices like smartphones or tablets, and can offer more precision and control than using fingers alone. They can be particularly useful for tasks that require fine motor skills or for people with disabilities or mobility issues that make using a touch screen difficult.
Some styluses are passive, meaning they don’t require batteries or other power sources, while others are active and contain electronic components that enable additional features like pressure sensitivity or palm rejection. Styluses are available in a wide range of shapes, sizes, and colors to suit different needs and preferences.
Stylus Code
// Define a variable
$primary-color = #ff0000
// Define a mixin
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
// Define a class with a background color and rounded corners
.my-class
background-color $primary-color
border-radius 5px In the example above, a variable $primary-color is defined and given the value #ff0000, which is a shade of red. A mixin border-redius() is also defined, which is a reusable block of code that generates the necessary CSS for applying rounded corners to an element.
Finally, a class .my-class is defined with a background color of $primary-color and rounded corners. When compiled, this Stylus code would generate the following CSS:
.my-class {
background-color: #ff0000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
} This is just a simple example, but Stylus can be used for much more complex and advanced styling needs.
