CSSの@importは以下のいずれかを記述します。

//style.css
@import url("pages/about.css");
@import url(pages/about.css);
@import "pages/about.css";
@import 'pages/about.css';

style.cssからabout.cssを読み込んでいるので、htmlではstyle.cssのみ読み込みます。

//index.html
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">

次に、Sassの@importです。CSSと同様、以下のように記述します。

//style.scss
@import url("pages/about.scss");
@import url(pages/about.scss);
@import "pages/about.scss";
@import 'pages/about.scss';

Sassコンパイル時、style.cssとabout.cssが生成されます。style.cssにはstyle.scssとabout.scssの内容が含まれるため、htmlではstyle.cssのみ読み込みます。

//index.html
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">

Sassコンパイル時に生成されるabout.cssは不要になります。そこでSassファイルからCSSファイルを生成しないように、Sassファイルのファイル名の先頭にアンダースコア（_）を付けて_about.scssのようにパーシャルファイルにします。

パーシャルファイルの@importは前述のSassの@importに加え、以下のいずれかの記述が可能です。

//style.scss
//ファイル名のアンダースコアを省略して@import
@import "pages/about.scss";

//ファイル名のアンダースコアと拡張子を省略して@import
@import "pages/about";

gulpを導入してgulp-sass-globをインストールすれば、以下の記述で対象ディレクトリ以下の全てのパーシャルファイルが読み込めます。

//style.scss
@import "pages/**";