Variable Types in the Stylus Guide: Strings, Numbers, and Booleans

In Stylus, variables act as containers for storing data, allowing us to reuse the same values across different parts of our code. Unlike many other CSS preprocessors, Stylus features a unique type system that supports several primitive data types, including strings, numbers, and booleans. A proper understanding and usage of these types are crucial for writing efficient and maintainable style code. This article will delve into these three core data types and demonstrate their application scenarios through practical examples.
String variables are used to store textual data. In Stylus, strings are typically wrapped in single or double quotes. While Stylus automatically handles most escape characters, explicit escaping is often necessary when dealing with special characters (such as newlines or the quote character itself).

// Define a basic string variable
$myText = 'Hello, Stylus!'

// Use directly in styles
body
  color: $myText // Note: This is usually used for comments or specific contexts; actual color values should use hex or rgb

In practical CSS generation, strings are primarily used to store class names, variable names, or dynamic text content. For instance, when we need to dynamically construct a style class based on user input, the string type becomes essential:

// Assume $userName is a string variable passed from outside
$className = 'user-' + $userName
.user-alex
  border: 1px solid #ccc

Precise Control of Number Variables

Number types in Stylus are mainly used to define numeric properties such as dimensions, spacing, and opacity. Stylus supports both integers and floating-point numbers and can automatically perform unit conversions (e.g., converting pixels to percentages or rem).

// Define integer variables
$paddingSize = 10
$gap = 20

// Define floating-point variables to handle decimal precision
$opacityLevel = 0.85
$fontSize = 16.5px

body
  padding: $paddingSize
  gap: $gap
  opacity: $opacityLevel
  font-size: $fontSize

The advantage of number variables lies in their calculation flexibility. You can add or subtract multiple number variables to generate complex layout parameters:

// Calculate total spacing
$totalGap = $gap + 5

.container
  margin-top: $totalGap

Logical Judgment and Conditional Styling with Boolean Values

Boolean values are one of the simplest data types in Stylus, having only two states: true and false. They are commonly used to control the visibility of styles, toggle activation states, and evaluate logical conditions. Although Stylus does not possess complete if-else statements like JavaScript, similar functionality can be achieved through specific syntax structures.

// Define boolean variables
$isActive = true
$isDarkMode = false

.container
  &.active when $isActive is true
    background: #007bff
  &.dark when $isDarkMode is true
    color: #ffffff

In practical development, boolean values are often combined with the when conditional statement to dynamically adjust styles based on variable states. This mechanism allows code to adapt to different themes or user preference settings:

$showSidebar = true

.sidebar
  display: block when $showSidebar is true
  display: none when $showSidebar is false

Type Mixing and Best Practices

Stylus allows mixing variables of different types within the same expression, but this requires careful handling. For example, adding a string to a number usually results in a type error or unexpected behavior unless specific concatenation syntax is used:

// Incorrect example: Direct mixing may lead to parsing failure
$wrong = $number + "text" // May fail to compile correctly

// Correct example: Explicit conversion or use of specific operators
$correct = $number + 'px' + ' text'

To maintain code clarity and maintainability, it is recommended to follow these best practices:

Explicit Naming: Reflect the data type in variable names, such as $price implying a number, while $message implies a string.
Unified Units: When handling dimension-related variables, strive to use a unified unit system (such as rem or em) to reduce conversion errors.
Avoid Implicit Conversion: Do not rely on Stylus to automatically infer types; always explicitly define the expected type of a variable.

By mastering these three fundamental data types—strings, numbers, and booleans, developers can more flexibly construct complex style logic. Understanding their characteristics and limitations will help you write concise yet powerful code in Stylus, laying a solid foundation for future mixed-variable applications.