Comparações CSS

props.leadIn Arquivo > Recursos beta > props.betaName props.leadOut

A maioria dos conceitos CSS se traduz em conceitos de estilo do Roblox. Os seguintes exemplos mostram como o CSS e o HTML se alinham com os conceitos de classe/propriedade do Luau e do Roblox.

Para testar cada um dos seguintes exemplos de script Luau:

No Explorador, crie o seguinte:
1. StyleSheet instância chamada CoreSheet dentro de ReplicatedStorage .
2. Instância vazia StyleRule como filha de CoreSheet .
3. ScreenGui container em StarterGui .
4. LocalScript instância dentro do ScreenGui.
5. StyleLink objeto dentro do ScreenGui cuja propriedade StyleSheet está ligada a CoreSheet .

No LocalScript, cole o seguinte código de suporte:

LocalScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
local screenGui = script.Parent

Para cada exemplo abaixo, cole as linhas de código Luau seguindo as linhas de suporte 1–6.

Seletores

A propriedade Selector da de um StyleRule especifica quais instâncias a regra deve afetar.Os seguintes tipos de seletor mapeiam de CSS para Luau e podem ser usados com combinadores.

Elemento

Equivalentes aos seletores de elementos CSS são os seletores de classe Roblox que selecionam todas as instâncias de uma dada classe , por exemplo , , , etc.

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML
<button>Main Menu</button>

Luau
-- Seletor de classe
rule.Selector = "TextButton"

-- Definir propriedades de regra
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.15, 0, 0, 40),
	["BorderSizePixel"] = 0
})

local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui

Classificação

Os equivalentes do Roblox aos seletores CSS class selecionam seletores de tags que utilizam tags aplicadas através de CollectionService .

CSS
.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML
<button class="button-primary">Main Menu</button>

Luau
-- Seletor de marcas
rule.Selector = ".ButtonPrimary"

-- Definir propriedades de regra
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["AutomaticSize"] = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui
-- Aplicar tag ao botão
CollectionService:AddTag(button, "ButtonPrimary")

Identificador

A comparação mais próxima do Roblox com o CSS é o seletor que seleciona de acordo com o valor de .Ao contrário da especificação W3C do atributo id, os nomes não são esperados para serem únicos.

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
-- Seletor de nome de instância
rule.Selector = "#ModalFrame"

-- Definir propriedades de regra
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("000022"),
	["BackgroundTransparency"] = 0.5,
	["Size"] = UDim2.new(0.5, 0, 0, 100),
	["AutomaticSize"] = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- Renomeie o quadro para combinar com o seletor
frame.Name = "ModalFrame"

Combinadores

Combinadores permitem que você misture seletores básicos para combinar relações de hierarquia mais profunda.

Criança

O seletor de filhos de > é idêntico entre CSS e Roblox.

CSS
.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<button>Options</button>
</div>

Luau
-- Seletor de filhos
rule.Selector = ".MenuContainer > TextButton"

-- Definir propriedades de regra para filho
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Criar contêiner de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar marcação
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Criar botão
local button = Instance.new("TextButton")
button.Text = "Options"
-- Defina o contêiner de menu como pai do botão
button.Parent = menuContainer

Descendente

Ao contrário da síntaxe de espaço em branco do CSS, por exemplo .menu-container button visto aqui, o Roblox usa o combinador >> para indicar uma relação descendente.

CSS
.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<div class="sub-container">
		<button>Options</button>
	</div>
</div>

Luau
-- Seletor descendente
rule.Selector = ".MenuContainer >> TextButton"

-- Definir propriedades de regra para descendente
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Criar contêiner de menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar marcação
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Criar sub-contêiner
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Defina o contêiner de menu como pai do subconjunto
subContainer.Parent = menuContainer

-- Criar botão
local button = Instance.new("TextButton")
button.Text = "Options"
-- Defina o subconjunto como pai do botão
button.Parent = subContainer

Lista de seletores

Múltiplos seletores (incluindo seletores com combinadores) podem ser declarados com o mesmo bloco de propriedade, separados por vírgulas, para reduzir a redundância.

CSS
img, p {
	background-color: #FF0033;
}

HTML
<img src="gear.png" width="100" height="100">

<p>Main Menu</p>

Luau
-- Seletor para rótulos de imagem E rótulos de texto
rule.Selector = "ImageLabel, TextLabel"

-- Definir propriedade comum para classes
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Criar rótulo de imagem
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Criar rótulo de texto
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "Main Menu"
textLabel.Parent = screenGui

Pseudo- classes

Os equivalentes do Roblox ao CSS pseudo-classes seletores são seletores de estado que correspondem a um dos quatro Enum.GuiState valores, como Hover ou Press.

CSS
img:hover {
	opacity: 0.5;
}

HTML
<img src="gear.png" width="100" height="100">

Luau
-- Seletor de estado
rule.Selector = "ImageLabel:Hover"

-- Definir propriedade de regra
rule:SetProperty("ImageTransparency", 0.5)

-- Criar rótulo de imagem
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

Semelhante ao modo como CSS pseudo-elementos podem modificar partes específicas de um elemento, o Roblox pode criar fantasmas UIComponents através da propriedade de uma regra de estilo Selector.Por exemplo, a seguinte regra cria efetivamente um modificador de UICorner sob cada Frame etiquetado com RoundedCorner20 e define cada modificador de CornerRadius para 20 pixels.

Luau
-- Seletor de componentes de UI
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Definir propriedade de regra
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Criar quadro
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Aplicar tag ao quadro
CollectionService:AddTag(frame, "RoundedCorner20")

Variáveis

O CSS permite que você declare e referencie variáveis ao longo de um sistema de estilo.O Roblox alcança isso através de tokens e do sistema de atributos de instância .Usando $ como prefixo, você pode referenciar atributos declarados em uma cadeia de herança StyleRule ou StyleSheet quando definir propriedades de estilo.

CSS
:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML
<button>Main Menu</button>

Luau
-- Defina tokens de folha de estilo usando atributos
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Seletor de classe
rule.Selector = "TextButton"

-- Definir propriedades de regra
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Criar botão
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Nesting e fusão

Pegando emprestado um conceito de SCSS , pode ser aninhado juntamente e seus seletores se mesclarão .

SCSS
#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML
<div id="menu-frame">
	<button>Charms</button>
	<button>Mana</button>
	<button>Scrolls</button>  
</div>

Luau
-- Regra de quadro de menu
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Parent = coreSheet
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("000022"),
	["Size"] = UDim2.new(0.25, 0, 0, 200),
	["AutomaticSize"] = Enum.AutomaticSize.Y
})

-- Regra de distribuição de menu
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Definir regra de menu como pai
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Regra de botão
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Definir regra de menu como pai
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Regra de sobreposição de botão
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Definir regra de botão como pai
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Criar quadro pai
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Criar botões dentro da janela
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame