SASS Selectors

Learn how to work around with Phenix Sass Selectors to build and customize different components with a specific set of properties that fix side effects or apply some UI effects


phenix uses a set of sass selectors as extendable helpers to build components and UI Elements with a specific set of properties that fix side effects or support some effect like centering a positioned element or clearing a floating effect etc, and you will come across some of these selectors when you get to use Components, Utilities, Forms and maybe it will come in handy to save time and merge your custom css which will maintain a small size css files.


UI Resets

the reset selectors are a collection of selectors that holds properties to reset the default css on different types of HTML elements like reset space margin/padding with %reset-space and %reset-list for ul/ol/dl elements, you can use them like the example below.

/*====> Reset Margin and Padding <====*/
.class-name {
@extend %reset-space;
/*====> Reset Margin, Padding and Remove list bulits <====*/
ul.class-name {
@extend %reset-list;
/*====> Reset Padding, Border and Focus outline for Form Controls <====*/
input.class-name {
@extend %reset-control;
/*====> Remove Select control arrow button <====*/
select.class-name {
@extend %select-reset;

Layouts & Typography

in layout and typography selectors you will find a collection that helps you do some tricks to approach a correct behavior like setting display prefixed properties for flex and creating inline-block elements that align correctly inside the line-height-based element, etc. you can use them like the example below.

/*====> Set display:inline-block that behave currectly to line-height <====*/
.class-name {
@extend %inline-block;
/*====> Set display:flex with wraped flow <====*/
.class-name {
@extend %flexbox;
/*====> Creating ellipsis overflowating text <====*/
.class-name {
@extend %nowrap;
/*====> fix float side effect by clearing after the floated element <====*/
.floated-elements-wraper {
@extend %clear-after;


in transition selectors, there are three selectors to make transition effect with 3 levels of timing fast:300ms, smooth:500ms, and slow:1s and you can use it when you need to make an animated hover effect or any animated transition changes on any element, and you can use them like the example below.

/*====> Set Fast:300ms Transtion <====*/
.class-name {
@extend %fast-motion;
/*====> Set Smooth:500ms Transtion <====*/
.class-name {
@extend %smooth-motion;
/*====> Set Slow:1000ms Transtion <====*/
.class-name {
@extend %slow-motion;

Position Fixes

position fixing selectors are side effect fixers when you position an element with a percentage instead of px, rem, etc.. to make the element start point self-center instead of the start edge.

/*====> Fix position:absolute, percentage position Horizontally [X] <====*/
.class-name {
@extend %position-center-x;
/*====> Fix position:absolute, percentage position Vertically [Y] <====*/
.class-name {
@extend %position-center-y;
/*====> Fix position:absolute, percentage position X, Y <====*/
.class-name {
@extend %position-center;
/*====> Reset transform:translate to 0 <====*/
.class-name {
@extend %position-default;

UI Helpers

UI helper selectors are a collection of selectors that help you do different stuff like preventing text selection, creating an overlay layer, or creating support for flipping effects, etc, and each selector has an example in the code below.

/*====> Prevent Text selection for any element <====*/
.class-name {
@extend %no-select;
/*====> Set [SVG] Arrow icon as Background for Select Controler <====*/
.class-name {
@extend %select-arrow;
/*====> Create an Overlay Layer from the Element :before pseudo <====*/
.class-name {
@extend %overlay;
/*====> Create Support for Nigiative z-index, Flip Effects <====*/
.class-name {
@extend %backface-visibility;

Cheat Sheet

a sheet table of all Sass selectors available in phenix.

%reset-spaceremove margin and padding<any>
%reset-listremove margin, padding, and list bullets<ul, ol, dl>
%reset-controlremove padding, border, and focus outline for form controls <input/>
%select-resetremove the select control arrow button<select>
%inline-blockset display:inline-block that behaves correctly to line-height<any>
%flexboxset display: flex with wrapped flow<any>
%nowrapcreating ellipsis overflowing text<any>
%clear-afterfix the float side effect by clearing after the elements<any-wrapper>
%fast-motionset Fast: 300ms Transition<any>
%smooth-motionset Smooth: 500ms Transition<any>
%slow-motionset Slow: 1000ms Transition<any>
%position-defaultreset transform: translate to 0<any>
%position-centerfix position: absolute, percentage position X, Y<any>
%position-center-yfix position: absolute, percentage position Vertically [Y]<any>
%position-center-xfix position: absolute, percentage position Horizontally [X]<any>
%no-selectprevent Text selection for any element<any>
%select-arrowset <svg> arrow icon as background for select controller<select>
%overlaycreate an overlay layer from the: before element pseudo<any>
%backface-visibilitycreate support for negative z-index, flip effects<any>
Note : ( —— ) refer to the same value as the column before.

Table of Content